@depict-ai/ui 4.7.7 → 4.7.8

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.7";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.8";
 function $24e27fab9c821b86$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -774,34 +774,6 @@ function $dc9262ef6f786812$export$d9f36cf74e24d595(media_query) {
   }) => signal[1](matches)).remove);
   return signal[0];
 }
-
-/** @jsxImportSource solid-js */
-
-function $2449872a62a75a20$export$ebdc3711f7e02ccd(what_to_watch) {
-  const [width, setWidth] = $i7OB2$createSignal();
-  const resizeObserver = new ResizeObserver($i7OB2$catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
-      setWidth(width);
-    }
-  }));
-  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $i7OB2$observer).onexists(what_to_watch, ({
-    element: element
-  }) => requestAnimationFrame($i7OB2$catchify(() => {
-    const current_size = what_to_watch.getBoundingClientRect().width;
-    if (current_size)
-      // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
-      setWidth(current_size);
-    resizeObserver.observe(element);
-  })));
-  $i7OB2$onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return width;
-}
 function $d134eae24341b4a1$export$89c6019e4baa40b1(props) {
   const style = $i7OB2$createMemo(() => {
     const {
@@ -936,9 +908,10 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   });
   // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
   // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
-  const executeWhenIdleBatched = fn => {
+  const executeWhenIdleBatched = (fn, isSizesUpdate) => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
-    if ($i7OB2$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
+    if ((!isSizesUpdate || !sizeSetFastPath) && $i7OB2$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately (improves lighthouse metrics)
+    // unless we're just a `sizes` update after the initial sizes setting (this optimisation makes the looks animation a lot smoother on low-cpu devices)
     const existingStack = listingContext?.[$e8ffe11ed01df0fe$var$onIdleFunctionsSymbol];
     if (existingStack) return existingStack.add(fn);
     const newStack = new Set([fn]);
@@ -1020,10 +993,11 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     // This greatly improves performance when loading (more) products
     // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
     timeoutSet = true; // Important to set timeoutSet before the call to executeWhenIdleBatched since if this is an important image executeWhenIdleBatched will execute fn immediately
-    executeWhenIdleBatched(handler);
+    executeWhenIdleBatched(handler, true);
   });
+  const dontLoadImageYet = $i7OB2$createMemo(() => !props.size() || !hasSetSize()); // Moving this condition into a memo saves us from re-setting src and srcset (expensive) if just props.size changes
   $i7OB2$createEffect(() => {
-    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    if (dontLoadImageYet()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
     Object.assign(img, src_options());
     // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
     // We can do this because there has to be a container around us giving us a size
@@ -1039,7 +1013,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     img.decode().catch(e => $i7OB2$dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
     .then(async () => {
       // Also wait with inserting image (i.e. paint) until browser is idle
-      await new Promise(r => executeWhenIdleBatched(r));
+      await new Promise(r => executeWhenIdleBatched(r, false));
       if (gotCleanedUp) return;
       setHasDecoded(true);
       hasDecodedFastPath = true;
@@ -1294,7 +1268,7 @@ var $62a8f670f8464532$var$_tmpl$ = ["<div", ' style="position:absolute;width:10p
 let $62a8f670f8464532$var$cachedValue;
 async function $62a8f670f8464532$export$7b9a0e99f0aeb2f3() {
   if ($62a8f670f8464532$var$cachedValue != undefined) return $62a8f670f8464532$var$cachedValue;
-  return $62a8f670f8464532$var$cachedValue = await $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383();
+  return $62a8f670f8464532$var$cachedValue = $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383();
 }
 async function $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383() {
   let isAffected = true;
@@ -1307,7 +1281,7 @@ async function $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383() {
       setTimeout($i7OB2$catchify(() => {
         r();
         div.remove();
-      }), 200);
+      }), 500);
     });
     const {
       style: style
@@ -1340,7 +1314,7 @@ async function $62a8f670f8464532$var$checkIfIsAffectedByChromeBug326498383() {
   }
   return isAffected;
 }
-var $7555dcad3b8a4632$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"];
+var $7555dcad3b8a4632$var$_tmpl$ = ["<div", ' class="scroll-padding"><div class="', '" style="', '">', "</div></div>"];
 function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
@@ -1349,7 +1323,8 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
   animationDuration_: animationDuration_,
   supportsHover_: supportsHover_,
   priceFormatting_: priceFormatting_,
-  pseudoRouter_: pseudoRouter_
+  pseudoRouter_: pseudoRouter_,
+  containerHeight_: containerHeight_
 }) {
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -1367,13 +1342,9 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
           return containerWidth_() || !displays_();
         },
         get children() {
-          return $i7OB2$ssr($7555dcad3b8a4632$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrElement("div", $i7OB2$mergeProps({
-            get ["class"]() {
-              return `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`;
-            }
-          }, () => displays_() && {
-            style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
-          }), () => $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Index), {
+          return $i7OB2$ssr($7555dcad3b8a4632$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`, $i7OB2$ssrStyle(displays_() &&
+          // The styling is written like this to eke out animation smoothness on low CPU devices, git blame for previous, more readable versions.
+          `--look-card-width:${containerWidth_()}px;--look-card-height:${containerHeight_()}px;--look-item-height:${lookItemHeight() || 200}px`), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Index), {
             get each() {
               return displays_() || Array.from({
                 length: 4
@@ -1396,7 +1367,7 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
                 })
               });
             }
-          })), false));
+          })));
         }
       });
     }
@@ -1422,7 +1393,7 @@ function $7555dcad3b8a4632$var$scrollingFunctionForChrome(element, targetScrollY
   // Bootstrap our animation - it will get called right before next frame shall be rendered.
   requestAnimationFrame(step);
 }
-var $28ee4f7db3cc44b8$var$_tmpl$ = ["<div", ' class="', '"></div>'];
+var $28ee4f7db3cc44b8$var$_tmpl$ = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
 function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   display_: display_,
   expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
@@ -1432,12 +1403,13 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_
 }) {
+  let container;
   const useWantsExpandedSignal_ = $i7OB2$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $dc9262ef6f786812$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $i7OB2$ssr($28ee4f7db3cc44b8$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-card ${!display_() ? "placeholder" : ""}`);
-  const containerWidth_ = $2449872a62a75a20$export$ebdc3711f7e02ccd(container);
+  const [containerWidth_, setContainerWidth] = $i7OB2$createSignal();
+  const [containerHeight_, setContainerHeight] = $i7OB2$createSignal();
   const clickHandler = $i7OB2$catchify(({
     target: target
   }) => {
@@ -1458,7 +1430,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   }));
   // Close us if another look expands
   $i7OB2$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $i7OB2$insert(container, () => [$i7OB2$createComponent((0, $i7OB2$Show), {
+  return $i7OB2$ssr($28ee4f7db3cc44b8$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return display_();
     },
@@ -1476,7 +1448,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
         autoAdjustAspectRatio: true
       });
     }
-  }), $i7OB2$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
+  })), $i7OB2$escape($i7OB2$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
     displays_: () => display_()?.displays,
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
@@ -1484,9 +1456,9 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     supportsHover_: supportsHover_,
     FavoriteButton_: FavoriteButton_,
     priceFormatting_: priceFormatting_,
-    pseudoRouter_: pseudoRouter_
-  })]);
-  return container;
+    pseudoRouter_: pseudoRouter_,
+    containerHeight_: containerHeight_
+  })));
 }
 
 /**
@@ -2835,6 +2807,34 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
+
+/** @jsxImportSource solid-js */
+
+function $2449872a62a75a20$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $i7OB2$createSignal();
+  const resizeObserver = new ResizeObserver($i7OB2$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const width = records[j].borderBoxSize?.[0]?.inlineSize ?? what_to_watch.getBoundingClientRect().width;
+      setWidth(width);
+    }
+  }));
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $i7OB2$observer).onexists(what_to_watch, ({
+    element: element
+  }) => requestAnimationFrame($i7OB2$catchify(() => {
+    const current_size = what_to_watch.getBoundingClientRect().width;
+    if (current_size)
+      // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
+      setWidth(current_size);
+    resizeObserver.observe(element);
+  })));
+  $i7OB2$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return width;
+}
 var $081752ca508a876f$var$_tmpl$ = '<path fill-rule="evenodd" d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z" fill="#0f0f0f"></path>';
 function $081752ca508a876f$export$f7658c347b037c3f(props = {}) {
   return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({