@depict-ai/ui 4.0.6 → 4.0.8

package/ES10/index.cjs

@@ -35,6 +35,8 @@ $parcel$export(module.exports, "decode_sorting", () => $a68b73fd7ba0853f$export$
 $parcel$export(module.exports, "shopifyContainedImageContextSymbol", () => $28535bb7671c63d1$export$d7b7ab832c20e2f4);
 $parcel$export(module.exports, "ListingProvider", () => $d067f3a30f047b41$export$e68cff63f76bd15b);
 $parcel$export(module.exports, "useListing", () => $d067f3a30f047b41$export$8d0c4fdbb05a2f2e);
+$parcel$export(module.exports, "ProductCardIndexProvider", () => $b54645378dfc7280$export$11354f017ddc9790);
+$parcel$export(module.exports, "useProductCardIndex", () => $b54645378dfc7280$export$e3faf4d95300054f);
 $parcel$export(module.exports, "ShopifyContainedImage", () => $28535bb7671c63d1$export$e4b984597b71e989);
 $parcel$export(module.exports, "SlidableItems", () => $ad8ec7729fffeb9c$export$6649caad96ef8870);
 $parcel$export(module.exports, "make_accurate_width_accessor", () => $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd);
@@ -92,7 +94,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.6";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.8";
 function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
   const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $52FdA$solidjs.createSignal();
   const deparallelizedFetcher = $52FdA$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
@@ -451,6 +453,20 @@ function $e82d0d417fa613e8$var$unwrapping_helper(elements) {
   } else if (typeof elements == "function") result.push(...$e82d0d417fa613e8$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
   return result;
 }
+const $b54645378dfc7280$var$ProductCardIndexContext = /*@__PURE__*/$52FdA$solidjs.createContext();
+function $b54645378dfc7280$export$11354f017ddc9790(props) {
+  return $52FdA$solidjsweb.createComponent($b54645378dfc7280$var$ProductCardIndexContext.Provider, {
+    get value() {
+      return props.index_;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $b54645378dfc7280$export$e3faf4d95300054f() {
+  return $52FdA$solidjs.useContext($b54645378dfc7280$var$ProductCardIndexContext);
+}
 let $76012c4468a53d1f$var$printedCloneError = false;
 function $76012c4468a53d1f$export$7f8bd308237ab5a5(get_displays_) {
   const displays_by_key_ = $52FdA$solidjs.createMemo(() => {
@@ -508,9 +524,22 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
             $52FdA$depictaiutilishared.dlog("Can't clone display", display, " (uncloneable objects in it), make sure you don't mutate it in the template since we cache.", e);
           }
         }
-        return product_card_template_(display, {
-          set_on_index_change: fn => $52FdA$solidjs.runWithOwner(owner, () => $52FdA$solidjs.createEffect(() => fn(index())))
+        let renderingResult;
+        // Wrap the product card in a ProductCardIndexProvider so that the index is available to the product card
+        // This is wo we can do intelligent image loading in ShopifyContainedImage without shopify devs having to pass in the index
+        // We don't care about the return value of ProductCardIndexProvider because our rendering result might be a promise which solid doesn't support until it has gone through createResource
+        $b54645378dfc7280$export$11354f017ddc9790({
+          index_: index,
+          get children() {
+            // This is the key - the functions called inside of the children getter of the provider are the one that have the context defined in their solid-internal Owner
+            renderingResult = product_card_template_(display, {
+              set_on_index_change: fn => $52FdA$solidjs.runWithOwner(owner, () => $52FdA$solidjs.createEffect(() => fn(index())))
+            });
+            return undefined; // just to satisfy the typing
+          }
         });
+        // renderingResult is guaranteed to be defined here (if rendering returned something) because the children getter of ProductCardIndexProvider is called synchronously (createRenderEffect is used solid-internally)
+        return renderingResult;
       });
       const node_accessor = $e82d0d417fa613e8$export$2f0cbfbb4354bb52(product_card_resource);
       $52FdA$solidjs.createEffect(() => {
@@ -535,7 +564,8 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
       });
       return [
       // Show content block before product card, so it's *at* that index
-      possible_content_block, product_card_resource]; // https://github.com/solidjs/solid/releases/tag/v1.7.0
+      possible_content_block, node_accessor // Don't return product_card_resource as calling it could be creating the nodes which would mean we'd be double-creating the nodes,
+      ]; // Regarding the as unknown shenanigans: https://github.com/solidjs/solid/releases/tag/v1.7.0
     }
   });
 }
@@ -2507,6 +2537,34 @@ function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
     return _el$;
   })();
 }
+let $e4e98e5080f4386e$var$browserIsBugged = false;
+function $e4e98e5080f4386e$export$2972b890694ced75(callback, _ref) {
+  let {
+    timeout: timeout
+  } = _ref;
+  if ($e4e98e5080f4386e$var$browserIsBugged) timeout /= 4;
+  const cancel = () => {
+    cancelIdleCallback(idleHandle);
+    clearTimeout(racingTimeout);
+  };
+  const idleHandle = requestIdleCallback(deadline => {
+    cancel();
+    return callback(deadline);
+  }, {
+    timeout: timeout
+  });
+  const racingTimeout = setTimeout(() => {
+    $e4e98e5080f4386e$var$browserIsBugged = true;
+    cancel();
+    callback({
+      didTimeout: false,
+      timeRemaining() {
+        return 500;
+      }
+    });
+  }, timeout + 1000);
+  return cancel;
+}
 function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $52FdA$solidjs.createSignal(0);
   const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => {
@@ -2534,6 +2592,7 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
 }
 const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
 const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
+const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $52FdA$solidjs.createMemo(() => {
@@ -2548,9 +2607,8 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     return cloned_props;
   });
   const src_options = $52FdA$solidjs.createMemo(() => {
-    const src = new URL(props.src, location.origin);
-    const fallback_src = $858fdcf73148519f$var$generateImageUrl(src, 400);
-    const srcset = $858fdcf73148519f$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const fallback_src = $858fdcf73148519f$var$generateImageUrl(props.src, 400);
+    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]);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2561,17 +2619,27 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
   const [hasSetSize, setHasSetSize] = $52FdA$solidjs.createSignal(false);
   const [hasDecoded, setHasDecoded] = $52FdA$solidjs.createSignal(false);
+  const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
   const sizePX = $52FdA$solidjs.createMemo(() => "".concat(props.size(), "px")); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
   const listingContext = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
+  const isPrioritisedImage = $52FdA$solidjs.createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
+  const loadLazily = $52FdA$solidjs.createMemo(() => {
+    const {
+      loading: loading
+    } = props;
+    if (loading === "force-lazy") return true;
+    return loading === "lazy" && !isPrioritisedImage();
+  });
   // 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 => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
+    if ($52FdA$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
     const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
     if (existingStack) return existingStack.add(fn);
     const newStack = new Set([fn]);
     if (listingContext) listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol] = newStack;
-    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+    const processStackWhenIdle = () => $e4e98e5080f4386e$export$2972b890694ced75($52FdA$depictaiutilishared.catchify(deadline => {
       const start = performance.now();
       const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
       for (const fn of newStack) {
@@ -2586,7 +2654,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
       }
       // Stack is empty
       if (listingContext) delete listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
-    }, {
+    }), {
       timeout: 15000
     } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
     );
@@ -2600,7 +2668,8 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   img.classList.add("s-responsive-image");
   if (listingContext) {
     let prevValue;
-    const aspectRatios = listingContext[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new (0, $52FdA$depictaiutilishared.ListenableSet)());
+    const aspectRatios = listingContext[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new Set());
+    const [, setMostPrevalentAspectRatio] = listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] || (listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] = $52FdA$solidjs.createSignal());
     img.addEventListener("load", $52FdA$depictaiutilishared.catchify(() => {
       // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
       const aspectRatio_ = img.naturalWidth / img.naturalHeight;
@@ -2610,13 +2679,22 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
       } : undefined;
       if (newValue) aspectRatios.add(newValue);
       prevValue = newValue;
+      // Do all calculations resulting of an update directly, for performance
+      const asArray = [...aspectRatios].map(_ref2 => {
+        let {
+          aspectRatio_: aspectRatio_
+        } = _ref2;
+        return aspectRatio_;
+      });
+      const mostPrevalentAspectRatio = $52FdA$depictaiutilishared.findMostFrequentItem(asArray);
+      setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
     }));
     $52FdA$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $52FdA$solidjs.onCleanup(() => gotCleanedUp = true);
   $52FdA$solidjsweb.spread(img, $52FdA$solidjs.mergeProps(otherOptions), false, true);
   $52FdA$solidjs.createEffect(() => {
-    if (!props.size()) return; // wait until we have a size
+    if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
     const handler = $52FdA$depictaiutilishared.catchify(() => {
       if (gotCleanedUp) return;
@@ -2641,7 +2719,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     // We can do this because there has to be a container around us giving us a size
     // No need to listen if we're already in the DOM
     if (hasDecodedFastPath) return;
-    if (props.loading === "lazy") {
+    if (loadLazily()) {
       // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
       // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
       setHasDecoded(true);
@@ -2668,9 +2746,10 @@ function $858fdcf73148519f$var$make_srcset(url, resolutions) {
   return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
 }
 function $858fdcf73148519f$var$generateImageUrl(url, width) {
-  // This function is quite slow, we maybe could do string concat with encodeURIComponent instead if shopify handles double width params well?
-  url.searchParams.set("width", width);
-  return url.href;
+  // 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)
+  // 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)
+  // That way we can just to string concatenation which is insanely fast
+  return url + "&width=" + encodeURIComponent(width);
 }
 const $28535bb7671c63d1$var$backupSizeSignal = /*@__PURE__*/$52FdA$solidjs.createSignal();
 const $28535bb7671c63d1$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
@@ -2680,41 +2759,23 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     // create a signal that's the same for all items in this listing
     context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $52FdA$solidjs.createSignal();
   const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$28535bb7671c63d1$export$d7b7ab832c20e2f4]) || $28535bb7671c63d1$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
-  const aspectRatiosSet = context ? context[(0, $858fdcf73148519f$export$f8945274f08a3105)] || (context[(0, $858fdcf73148519f$export$f8945274f08a3105)] = new (0, $52FdA$depictaiutilishared.ListenableSet)()) : undefined;
-  const [aspectRatios, setAspectRatios] = $52FdA$solidjs.createSignal(aspectRatiosSet, {
-    equals: false
-  });
-  const aspectRatioToUse = $52FdA$solidjs.createMemo(() => {
-    const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
-    useMostPrevalentAspectRatio: {
-      if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
-      // Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
-      const asArray = [...aspectRatiosSet].map(_ref => {
-        let {
-          aspectRatio_: aspectRatio_
-        } = _ref;
-        return aspectRatio_;
-      });
-      const mostPrevalentAspectRatio = $52FdA$depictaiutilishared.findMostFrequentItem(asArray);
-      if (mostPrevalentAspectRatio) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(mostPrevalentAspectRatio, ")");
-    }
-    return props.aspectRatio;
-  });
-  const container = $52FdA$solidjsweb.createComponent((0, $ce467edb5343cfcd$export$94026ee33dbabc26), {
-    get aspectRatio() {
-      return aspectRatioToUse();
-    },
-    get ["class"]() {
+  const [mostPrevalentAspectRatio] = context ? context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] || (context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] = $52FdA$solidjs.createSignal()) : [];
+  const container = $ce467edb5343cfcd$export$94026ee33dbabc26({
+    // Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
+    get class() {
       return props.class;
+    },
+    get aspectRatio() {
+      if (props.autoAdjustAspectRatio) {
+        const targetRatio = mostPrevalentAspectRatio === null || mostPrevalentAspectRatio === void 0 ? void 0 : mostPrevalentAspectRatio();
+        if (targetRatio != undefined) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $52FdA$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  for (const event of ["add", "delete"]) {
-    aspectRatiosSet === null || aspectRatiosSet === void 0 || aspectRatiosSet.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
-    $52FdA$solidjs.onCleanup(() => aspectRatiosSet === null || aspectRatiosSet === void 0 ? void 0 : aspectRatiosSet.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
-  }
   $52FdA$solidjs.createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
@@ -6319,7 +6380,7 @@ function $0257c760a99bfacb$export$e0d834a0ad870cda(_ref) {
   $52FdA$solidjs.createComputed(() => {
     var _selected_filter;
     const defined_filter_data = (_selected_filter = selected_filter()) === null || _selected_filter === void 0 ? void 0 : _selected_filter.data;
-    const default_data = $52FdA$solidjs.untrack(defaultRange);
+    const default_data = defaultRange();
     if (Array.isArray(defined_filter_data)) current_range[1](defined_filter_data);else current_range[1](default_data);
   });
   $52FdA$solidjs.createComputed(() => {

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.6";
+export const version = "4.0.8";
 export type ModalAlignmentSignals = {
   body_: Signal<JSX.CSSProperties>;
   field_: Signal<JSX.CSSProperties>;
@@ -388,6 +388,17 @@ export function ImageContainer(props: {
   class?: string;
   children?: JSX.Element;
 }): HTMLDivElement;
+/**
+ * Provider to wrap every product card that gets rendered in (in PLPResults rendering internals), enables using useProductCardIndex anywhere inside the product card to get the index of the product card.
+ */
+export function ProductCardIndexProvider(props: {
+  children: JSX.Element;
+  index_: Accessor<number>;
+}): JSX.Element;
+/**
+ * Use this to get an accessor containing the index of your product card.
+ */
+export function useProductCardIndex(): Accessor<number> | undefined;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
  */
@@ -395,6 +406,7 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 /**
  * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
  * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
+ * If ran within Depict product card rendering, within one of the first 8 product cards, those images will be loaded immediately and loading="lazy" will be ignored for them (unless you set it to "force-lazy").
  * This is used for our responsive images:
  * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
  * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
@@ -404,8 +416,9 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
+  loading?: "eager" | "lazy" | "force-lazy";
 }): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;