@depict-ai/ui 4.1.3 → 4.1.5

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/ES10/index.cjs CHANGED
@@ -18,6 +18,7 @@ function $parcel$export(e, n, v, s) {
18
18
  function $parcel$interopDefault(a) {
19
19
  return a && a.__esModule ? a.default : a;
20
20
  }
21
+ $parcel$export(module.exports, "promiseSafeStructuredClone", () => $400d96565bbbfe07$export$83bb9af5671e1dbe);
21
22
  $parcel$export(module.exports, "preserve_items_in_history_dot_state", () => $cfcd56242923775d$export$5162a71f252e6122);
22
23
  $parcel$export(module.exports, "prefixes_to_preserve_in_history_dot_state", () => $cfcd56242923775d$export$3064e1e8c6513da3);
23
24
  $parcel$export(module.exports, "allowNativeNavigation", () => $9ca08bcacbc598ce$export$29d28dadc2d6b631);
@@ -98,7 +99,76 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
98
99
  $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
99
100
  $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
100
101
  /*! Depict.ai search and product listing SDK */
101
- const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.3";
102
+ const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.5";
103
+
104
+ /**
105
+ * This is a function that will safely clone an object that may contain promises.
106
+ * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.
107
+ * @param obj Anything to clone
108
+ */
109
+ function $400d96565bbbfe07$export$83bb9af5671e1dbe(obj) {
110
+ if (obj instanceof Promise) return obj;
111
+ // Extract all promises, keep a map of them, and then re-apply them to both the original object and the target object after cloning
112
+ const seen = new Set();
113
+ const keyStack = [[]];
114
+ const valueStack = [obj];
115
+ const promiseLocationStack = [];
116
+ while (valueStack.length) {
117
+ const value = valueStack.pop();
118
+ const keyPath = keyStack.pop();
119
+ // Promises can only be in objects and we don't need to check for objects we've already seen (like in circular references)
120
+ if (typeof value !== "object" || value === null || seen.has(value)) continue;
121
+ seen.add(value);
122
+ if (Array.isArray(value)) {
123
+ for (let i = 0; i < value.length; i++) {
124
+ const ourValue = value[i];
125
+ const valuesKeyPath = [...keyPath, i];
126
+ if (ourValue instanceof Promise) {
127
+ promiseLocationStack.push([valuesKeyPath, ourValue]);
128
+ delete value[i]; // This will leave a hole in the array, but it's fine since we'll put it back soon
129
+ // This way both the indexes will be correct when putting the value back and our for loop doesn't get messed up
130
+ } else {
131
+ keyStack.push(valuesKeyPath);
132
+ valueStack.push(ourValue);
133
+ }
134
+ }
135
+ continue;
136
+ }
137
+ for (const innerKey in value) {
138
+ const ourValue = value[innerKey];
139
+ const valuesKeyPath = [...keyPath, innerKey];
140
+ if (ourValue instanceof Promise) {
141
+ promiseLocationStack.push([valuesKeyPath, ourValue]);
142
+ delete value[innerKey];
143
+ } else {
144
+ keyStack.push(valuesKeyPath);
145
+ valueStack.push(ourValue);
146
+ }
147
+ }
148
+ }
149
+ let structuredClonedObject;
150
+ let error;
151
+ try {
152
+ structuredClonedObject = structuredClone(obj);
153
+ } catch (e) {
154
+ // We still need to put back the promises in the original object, even if we threw an error
155
+ error = e;
156
+ }
157
+ // Put back the promises in both the original object and the cloned object
158
+ while (promiseLocationStack.length) {
159
+ const [keyPath, promise] = promiseLocationStack.pop();
160
+ let targetInClone = structuredClonedObject;
161
+ let targetInOriginal = obj;
162
+ for (let i = 0; i < keyPath.length - 1; i++) {
163
+ if (!error) targetInClone = targetInClone[keyPath[i]];
164
+ targetInOriginal = targetInOriginal[keyPath[i]];
165
+ }
166
+ if (!error) targetInClone[keyPath[keyPath.length - 1]] = promise;
167
+ targetInOriginal[keyPath[keyPath.length - 1]] = promise;
168
+ }
169
+ if (error) throw error;
170
+ return structuredClonedObject;
171
+ }
102
172
  const $cfcd56242923775d$export$3064e1e8c6513da3 = new Set();
103
173
  let $cfcd56242923775d$var$has_ran = false;
104
174
  function $cfcd56242923775d$export$5162a71f252e6122() {
@@ -245,12 +315,55 @@ function $3e17e871e9d0911d$export$d9f36cf74e24d595(media_query) {
245
315
  }).remove);
246
316
  return signal[0];
247
317
  }
318
+ var $e3d733f899558f40$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<span>`);
319
+ function $e3d733f899558f40$export$acb3eaade4b23afd(props) {
320
+ // Work around https://github.com/solidjs/solid/issues/1980
321
+ return (() => {
322
+ var _el$ = $52FdA$solidjsweb.getNextElement($e3d733f899558f40$var$_tmpl$);
323
+ $52FdA$solidjsweb.effect(_p$ => {
324
+ var _v$ = "".concat(props.class || "", " depict-placeholder"),
325
+ _v$2 = props.style;
326
+ _v$ !== _p$.e && $52FdA$solidjsweb.className(_el$, _p$.e = _v$);
327
+ _p$.t = $52FdA$solidjsweb.style(_el$, _v$2, _p$.t);
328
+ return _p$;
329
+ }, {
330
+ e: undefined,
331
+ t: undefined
332
+ });
333
+ return _el$;
334
+ })();
335
+ }
336
+ function $a7f7d416e6f61504$export$89c6019e4baa40b1(props) {
337
+ const style = $52FdA$solidjs.createMemo(() => {
338
+ const {
339
+ style: style,
340
+ height: height,
341
+ width: width
342
+ } = props;
343
+ return {
344
+ ...(style || {}),
345
+ height: height !== null && height !== void 0 ? height : "1em",
346
+ ...(width && {
347
+ width: width
348
+ })
349
+ };
350
+ });
351
+ return $52FdA$solidjsweb.createComponent((0, $e3d733f899558f40$export$acb3eaade4b23afd), {
352
+ get style() {
353
+ return style();
354
+ },
355
+ get ["class"]() {
356
+ return props.class;
357
+ }
358
+ });
359
+ }
248
360
  var $82d079b68975fbf7$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class="title line-clamp">`),
249
361
  $82d079b68975fbf7$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class=brand>`),
250
362
  $82d079b68975fbf7$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="tagline line-clamp">`),
251
363
  $82d079b68975fbf7$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class="orig price"><!$><!/><!$><!/><!$><!/>`),
252
- $82d079b68975fbf7$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<a class=instant-card><div class=img-part><!$><!/><!$><!/></div><div class=right-part><!$><!/><div class=price-container><!$><!/><span class=price><!$><!/><!$><!/><!$><!/>`),
253
- $82d079b68975fbf7$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=title-brand-tagline>`);
364
+ $82d079b68975fbf7$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class=price><!$><!/><!$><!/><!$><!/>`),
365
+ $82d079b68975fbf7$var$_tmpl$6 = /*#__PURE__*/$52FdA$solidjsweb.template(`<a class=instant-card><div class=img-part><!$><!/><!$><!/></div><div class=right-part><!$><!/><div class=price-container><!$><!/><!$><!/>`),
366
+ $82d079b68975fbf7$var$_tmpl$7 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=title-brand-tagline>`);
254
367
  const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
255
368
  var _variant$image_urls;
256
369
  let {
@@ -266,7 +379,10 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
266
379
  const [get_selected_index_, set_selected_index_] = selected_index_ || [];
267
380
  const variant = display_.variant_displays[display_.variant_index];
268
381
  const href = $52FdA$solidjs.createMemo(() => variant.page_url); // <- could be made reactive getter in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
269
- const is_sale = variant.sale_price !== variant.original_price;
382
+ // Prices can be promises, for example in our shopify app. Always assume they are (will work the same when they aren't)
383
+ const [salePrice] = $52FdA$solidjs.createResource(() => variant.sale_price);
384
+ const [originalPrice] = $52FdA$solidjs.createResource(() => variant.original_price);
385
+ const isOnSale = $52FdA$solidjs.createMemo(() => salePrice() !== originalPrice());
270
386
  const supports_hover = $3e17e871e9d0911d$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
271
387
  const [isSelected, selectedDueToKeyboardNavigation] = selected_index_ ? $b0f8d9f49e018db9$export$fb40a80c530e5f2b(get_selected_index_, keyboardNavigationGroupIndex_, index_) : [];
272
388
  const secondary_image_url = ((_variant$image_urls = variant.image_urls) === null || _variant$image_urls === void 0 ? void 0 : _variant$image_urls[1]) || variant.secondary_image_url || variant.alternative_display_image_url;
@@ -288,25 +404,20 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
288
404
  })();
289
405
  })())];
290
406
  return (() => {
291
- var _el$4 = $52FdA$solidjsweb.getNextElement($82d079b68975fbf7$var$_tmpl$5),
407
+ var _el$4 = $52FdA$solidjsweb.getNextElement($82d079b68975fbf7$var$_tmpl$6),
292
408
  _el$5 = _el$4.firstChild,
293
409
  _el$6 = _el$5.firstChild,
294
410
  [_el$7, _co$] = $52FdA$solidjsweb.getNextMarker(_el$6.nextSibling),
295
411
  _el$8 = _el$7.nextSibling,
296
412
  [_el$9, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$8.nextSibling),
297
413
  _el$10 = _el$5.nextSibling,
298
- _el$28 = _el$10.firstChild,
299
- [_el$29, _co$10] = $52FdA$solidjsweb.getNextMarker(_el$28.nextSibling),
300
- _el$11 = _el$29.nextSibling,
414
+ _el$30 = _el$10.firstChild,
415
+ [_el$31, _co$11] = $52FdA$solidjsweb.getNextMarker(_el$30.nextSibling),
416
+ _el$11 = _el$31.nextSibling,
301
417
  _el$26 = _el$11.firstChild,
302
418
  [_el$27, _co$9] = $52FdA$solidjsweb.getNextMarker(_el$26.nextSibling),
303
- _el$19 = _el$27.nextSibling,
304
- _el$20 = _el$19.firstChild,
305
- [_el$21, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$20.nextSibling),
306
- _el$22 = _el$21.nextSibling,
307
- [_el$23, _co$7] = $52FdA$solidjsweb.getNextMarker(_el$22.nextSibling),
308
- _el$24 = _el$23.nextSibling,
309
- [_el$25, _co$8] = $52FdA$solidjsweb.getNextMarker(_el$24.nextSibling);
419
+ _el$28 = _el$27.nextSibling,
420
+ [_el$29, _co$10] = $52FdA$solidjsweb.getNextMarker(_el$28.nextSibling);
310
421
  $52FdA$solidjsweb.use(element => $b0f8d9f49e018db9$export$12761f53d7ab7f27(element, () => {
311
422
  var _selectedDueToKeyboar;
312
423
  return (_selectedDueToKeyboar = selectedDueToKeyboardNavigation === null || selectedDueToKeyboardNavigation === void 0 ? void 0 : selectedDueToKeyboardNavigation()) !== null && _selectedDueToKeyboar !== void 0 ? _selectedDueToKeyboar : false;
@@ -335,12 +446,14 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
335
446
  }
336
447
  }), _el$9, _co$2);
337
448
  $52FdA$solidjsweb.insert(_el$10, selected_index_ ? $52FdA$solidjsweb.createComponent(TitleBrandTagline, {}) : (() => {
338
- var _el$30 = $52FdA$solidjsweb.getNextElement($82d079b68975fbf7$var$_tmpl$6);
339
- $52FdA$solidjsweb.insert(_el$30, $52FdA$solidjsweb.createComponent(TitleBrandTagline, {}));
340
- return _el$30;
341
- })(), _el$29, _co$10);
449
+ var _el$32 = $52FdA$solidjsweb.getNextElement($82d079b68975fbf7$var$_tmpl$7);
450
+ $52FdA$solidjsweb.insert(_el$32, $52FdA$solidjsweb.createComponent(TitleBrandTagline, {}));
451
+ return _el$32;
452
+ })(), _el$31, _co$11);
342
453
  $52FdA$solidjsweb.insert(_el$11, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
343
- when: is_sale,
454
+ get when() {
455
+ return isOnSale();
456
+ },
344
457
  get children() {
345
458
  var _el$12 = $52FdA$solidjsweb.getNextElement($82d079b68975fbf7$var$_tmpl$4),
346
459
  _el$13 = _el$12.firstChild,
@@ -352,7 +465,7 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
352
465
  $52FdA$solidjsweb.insert(_el$12, () => i18n_.price_formatting_().pre_, _el$14, _co$3);
353
466
  $52FdA$solidjsweb.insert(_el$12, $52FdA$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
354
467
  get price_() {
355
- return variant.original_price;
468
+ return originalPrice();
356
469
  },
357
470
  get price_formatting_() {
358
471
  return i18n_.price_formatting_();
@@ -362,17 +475,39 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
362
475
  return _el$12;
363
476
  }
364
477
  }), _el$27, _co$9);
365
- _el$19.classList.toggle("sales-price", !!is_sale);
366
- $52FdA$solidjsweb.insert(_el$19, () => i18n_.price_formatting_().pre_, _el$21, _co$6);
367
- $52FdA$solidjsweb.insert(_el$19, $52FdA$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
368
- get price_() {
369
- return variant.sale_price;
478
+ $52FdA$solidjsweb.insert(_el$11, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
479
+ get when() {
480
+ return !salePrice.loading && salePrice.latest;
370
481
  },
371
- get price_formatting_() {
372
- return i18n_.price_formatting_();
482
+ get fallback() {
483
+ return $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
484
+ width: "5ch",
485
+ height: "1em",
486
+ "class": "price"
487
+ });
488
+ },
489
+ get children() {
490
+ var _el$19 = $52FdA$solidjsweb.getNextElement($82d079b68975fbf7$var$_tmpl$5),
491
+ _el$20 = _el$19.firstChild,
492
+ [_el$21, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$20.nextSibling),
493
+ _el$22 = _el$21.nextSibling,
494
+ [_el$23, _co$7] = $52FdA$solidjsweb.getNextMarker(_el$22.nextSibling),
495
+ _el$24 = _el$23.nextSibling,
496
+ [_el$25, _co$8] = $52FdA$solidjsweb.getNextMarker(_el$24.nextSibling);
497
+ $52FdA$solidjsweb.insert(_el$19, () => i18n_.price_formatting_().pre_, _el$21, _co$6);
498
+ $52FdA$solidjsweb.insert(_el$19, $52FdA$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
499
+ get price_() {
500
+ return salePrice();
501
+ },
502
+ get price_formatting_() {
503
+ return i18n_.price_formatting_();
504
+ }
505
+ }), _el$23, _co$7);
506
+ $52FdA$solidjsweb.insert(_el$19, () => i18n_.price_formatting_().post_, _el$25, _co$8);
507
+ $52FdA$solidjsweb.effect(() => _el$19.classList.toggle("sales-price", !!isOnSale()));
508
+ return _el$19;
373
509
  }
374
- }), _el$23, _co$7);
375
- $52FdA$solidjsweb.insert(_el$19, () => i18n_.price_formatting_().post_, _el$25, _co$8);
510
+ }), _el$29, _co$10);
376
511
  $52FdA$solidjsweb.effect(_p$ => {
377
512
  var _v$ = href(),
378
513
  _v$2 = display_.search_result_id,
@@ -391,24 +526,6 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
391
526
  })();
392
527
  };
393
528
  $52FdA$solidjsweb.delegateEvents(["click"]);
394
- var $e3d733f899558f40$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<span>`);
395
- function $e3d733f899558f40$export$acb3eaade4b23afd(props) {
396
- // Work around https://github.com/solidjs/solid/issues/1980
397
- return (() => {
398
- var _el$ = $52FdA$solidjsweb.getNextElement($e3d733f899558f40$var$_tmpl$);
399
- $52FdA$solidjsweb.effect(_p$ => {
400
- var _v$ = "".concat(props.class || "", " depict-placeholder"),
401
- _v$2 = props.style;
402
- _v$ !== _p$.e && $52FdA$solidjsweb.className(_el$, _p$.e = _v$);
403
- _p$.t = $52FdA$solidjsweb.style(_el$, _v$2, _p$.t);
404
- return _p$;
405
- }, {
406
- e: undefined,
407
- t: undefined
408
- });
409
- return _el$;
410
- })();
411
- }
412
529
  function $b8a8d61b3ec5f5ac$export$3f37af283f8fb843(props) {
413
530
  const style = $52FdA$solidjs.createMemo(() => {
414
531
  const {
@@ -440,30 +557,6 @@ function $b8a8d61b3ec5f5ac$export$3f37af283f8fb843(props) {
440
557
  }
441
558
  });
442
559
  }
443
- function $a7f7d416e6f61504$export$89c6019e4baa40b1(props) {
444
- const style = $52FdA$solidjs.createMemo(() => {
445
- const {
446
- style: style,
447
- height: height,
448
- width: width
449
- } = props;
450
- return {
451
- ...(style || {}),
452
- height: height !== null && height !== void 0 ? height : "1em",
453
- ...(width && {
454
- width: width
455
- })
456
- };
457
- });
458
- return $52FdA$solidjsweb.createComponent((0, $e3d733f899558f40$export$acb3eaade4b23afd), {
459
- get style() {
460
- return style();
461
- },
462
- get ["class"]() {
463
- return props.class;
464
- }
465
- });
466
- }
467
560
  var $c0cf6af094336798$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=instant-card><div class=img-part></div><div class=right-part><div class=title-brand-tagline><span class=title></span></div><div class=price-container>`);
468
561
  const $c0cf6af094336798$export$8a2234b5b1a5ebd4 = "--image-aspect-ratio";
469
562
  function $c0cf6af094336798$export$ee1733d9a8495996() {
@@ -576,7 +669,12 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
576
669
  // We had a case on singular where they popped an image url and due to use caching after some time there was no image
577
670
  // Attempt cloning the displays if possible (99.9% of the cases probably) and if not, just use the original display
578
671
  try {
579
- display = structuredClone(display);
672
+ // Use promiseSafeStructuredClone so that:
673
+ // 1. When fetching for example prices from an API, one can start that API request
674
+ // 2. Add the promise to the display
675
+ // 3. Already render the product card with placeholders for prices while the price loads
676
+ // 4. When the price loads, re-render the display with the new price
677
+ display = $400d96565bbbfe07$export$83bb9af5671e1dbe(display);
580
678
  } catch (e) {
581
679
  if (!$76012c4468a53d1f$var$printedCloneError) {
582
680
  $76012c4468a53d1f$var$printedCloneError = true;
@@ -634,7 +732,7 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
634
732
  // Modified futher to bias towards saying objects are equal non-primitive objects differ
635
733
  function $76012c4468a53d1f$var$deep_equal(obj1, obj2) {
636
734
  const stack = [[obj1, obj2]];
637
- while (stack.length > 0) {
735
+ while (stack.length) {
638
736
  const [currentObj1, currentObj2] = stack.pop();
639
737
  if (currentObj1 === currentObj2) continue;
640
738
  if (Array.isArray(currentObj1) && Array.isArray(currentObj2)) {
@@ -2647,10 +2745,10 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
2647
2745
  const src_options = $52FdA$solidjs.createMemo(() => {
2648
2746
  const {
2649
2747
  src: src,
2650
- customGenerateImageUrl_: customGenerateImageUrl_
2748
+ customUrls: customUrls
2651
2749
  } = props;
2652
- const fallback_src = (customGenerateImageUrl_ || $858fdcf73148519f$var$generateImageUrl)(src, 400);
2653
- const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
2750
+ const fallback_src = (customUrls || $858fdcf73148519f$export$1d6267828870adda)(src, 400);
2751
+ const srcset = $858fdcf73148519f$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customUrls);
2654
2752
  // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
2655
2753
  return {
2656
2754
  srcset: srcset,
@@ -2659,7 +2757,9 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
2659
2757
  });
2660
2758
  // Work around https://github.com/solidjs/solid/issues/1828
2661
2759
  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
2662
- const [, otherAttributes] = $52FdA$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
2760
+ const [, otherAttributes] = $52FdA$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading", "customUrls" // Can't have properties ending on underscore because the property name mangling will get confused by this <-
2761
+ ]);
2762
+
2663
2763
  const [hasSetSize, setHasSetSize] = $52FdA$solidjs.createSignal(false);
2664
2764
  const [hasDecoded, setHasDecoded] = $52FdA$solidjs.createSignal(false);
2665
2765
  const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
@@ -2791,9 +2891,9 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
2791
2891
  });
2792
2892
  }
2793
2893
  function $858fdcf73148519f$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
2794
- return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$var$generateImageUrl)(url, width), " ").concat(width, "w")).join(", ");
2894
+ return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$export$1d6267828870adda)(url, width), " ").concat(width, "w")).join(", ");
2795
2895
  }
2796
- function $858fdcf73148519f$var$generateImageUrl(url, width) {
2896
+ function $858fdcf73148519f$export$1d6267828870adda(url, width) {
2797
2897
  // Even just creating one `URL` object per image src and then setting the search parameter is quite slow (0.25ms to set the width param)
2798
2898
  // We're making the assumptions that the url has already at least one query parameter and that the image resizing service will choose the last one out of a duplicate width parameter (shopify's does)
2799
2899
  // That way we can just to string concatenation which is insanely fast
@@ -2860,8 +2960,15 @@ function $9e470232a6b789a3$export$9d4a4b669b1929ab(props) {
2860
2960
  get imgProps() {
2861
2961
  return {
2862
2962
  ...props.imgProps,
2863
- customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
2864
- ) => "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url)
2963
+ customUrls: (url, width // Apparently don't have to encode url for CF's service
2964
+ ) => {
2965
+ if (url.startsWith("https://cdn.shopify.com"))
2966
+ // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
2967
+ // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
2968
+ return $858fdcf73148519f$export$1d6267828870adda(url, width);
2969
+ // Use cloudflare image resizer instead of img.depict.ai because it's a lot faster (and also auto-chooses other formats if webp is not supported)
2970
+ return "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url);
2971
+ }
2865
2972
  };
2866
2973
  }
2867
2974
  }));
package/ES10/index.d.ts CHANGED
@@ -10,7 +10,13 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
10
10
  import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
11
11
  import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
12
12
  import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
13
- export const version = "4.1.3";
13
+ export const version = "4.1.5";
14
+ /**
15
+ * This is a function that will safely clone an object that may contain promises.
16
+ * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.
17
+ * @param obj Anything to clone
18
+ */
19
+ export function promiseSafeStructuredClone<T>(obj: T): T;
14
20
  export const prefixes_to_preserve_in_history_dot_state: Set<string>;
15
21
  /**
16
22
  * Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
@@ -436,7 +442,7 @@ export function ShopifyResponsiveImg(props: {
436
442
  size: Accessor<number>;
437
443
  src: string;
438
444
  loading?: "eager" | "lazy" | "force-lazy";
439
- customGenerateImageUrl_?: (url: string, width: number) => string;
445
+ customUrls?: (url: string, width: number) => string;
440
446
  } & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
441
447
  type ImagePlaceholderBaseOptions = {
442
448
  style?: JSX.CSSProperties;