@depict-ai/ui 1.4.18 → 1.4.20

package/latest/index.cjs

@@ -1,5 +1,6 @@
 var $gVhhF$depictaiutilishared = require("@depict-ai/utilishared/latest");
 var $gVhhF$solidjsweb = require("solid-js/web");
+var $gVhhF$depictaiutilisharedlatest = require("@depict-ai/utilishared/latest/latest");
 var $gVhhF$solidjs = require("solid-js");
 require("../multi_import_deduplicator.cjs").register_es_version("ui", "latest");
 function $parcel$export(e, n, v, s) {
@@ -10,6 +11,9 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "ShopifyResponsiveImg", () => $19950faaac026e09$export$6e5611bc7e57e477);
+$parcel$export(module.exports, "makeSizeAccessor", () => $19950faaac026e09$export$e6fffe67d4cdd848);
+$parcel$export(module.exports, "ImageContainer", () => $93304d59a9747aa6$export$94026ee33dbabc26);
 $parcel$export(module.exports, "SentryErrorBoundary", () => $edafe91daf3091d7$export$b69d0d92862de18b);
 $parcel$export(module.exports, "ExpandingDetails", () => $a69e505a12a77874$export$6c6d7a51fa9aa15d);
 $parcel$export(module.exports, "accessor_of_object_to_object_with_accessor_values", () => $0785f4c9947d9b5f$export$f091cbac892643a4);
@@ -55,7 +59,62 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.18";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.20";
+const $19950faaac026e09$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<img>`, 1);
+function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $gVhhF$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($gVhhF$depictaiutilisharedlatest.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $gVhhF$depictaiutilishared.is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $19950faaac026e09$export$6e5611bc7e57e477({
+  src: raw_src,
+  size: size,
+  resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+  ...otherOptions
+}) {
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $19950faaac026e09$var$generateImageUrl(src, 400);
+  const srcset = $19950faaac026e09$var$make_srcset(src, resolutions);
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($19950faaac026e09$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(otherOptions, {
+      "src": fallbackSrc,
+      "srcset": srcset,
+      get sizes() {
+        return size() + "px";
+      }
+    }), false, false);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
+function $19950faaac026e09$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $19950faaac026e09$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div></div>`, 2);
+function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
+    $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
+    return _el$;
+  })();
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
@@ -5126,6 +5185,7 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
 }) {
   const placeholder_crumb_data = [,,,];
   const crumb_data = $gVhhF$solidjs.createMemo(() => get_api_crumb_data() || placeholder_crumb_data);
+  const href_accessor = $gVhhF$depictaiutilishared.use_href_accessor();
   return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "BreadCrumbs failed",
@@ -5136,8 +5196,10 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
           return crumb_data();
         },
         children: (display_accessor, index) => {
+          const is_last = $gVhhF$solidjs.createMemo(() => index === crumb_data()?.length - 1);
+          const url = $gVhhF$solidjs.createMemo(() => is_last() ? href_accessor() : display_accessor()?.page_url);
           const href = $gVhhF$solidjs.createMemo(() => $1ab22f2cd39b3061$export$43cd1e747fecd42e({
-            to_url_: display_accessor()?.page_url,
+            to_url_: url(),
             filter_query_param_prefix_: filter_query_param_prefix_,
             sorting_query_param_: sorting_query_param_
           }));

package/latest/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Accessor, JSX, Signal, Setter } from "solid-js";
 import { report, Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
@@ -7,7 +7,38 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "1.4.18";
+export const version = "1.4.20";
+/**
+ * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+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.
+ * 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)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ */
+export function ShopifyResponsiveImg({
+  src: raw_src,
+  size,
+  resolutions,
+  ...otherOptions
+}: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): HTMLImageElement;
+/** @jsxImportSource solid-js */
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number;
+}): HTMLDivElement;
 declare class SDKError extends Error {}
 export class ProductCardError extends SDKError {
   constructor(templateError: Error);