@depict-ai/ui 4.1.1 → 4.1.3

package/ES10/index.cjs

@@ -98,7 +98,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.1.1";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.3";
 const $cfcd56242923775d$export$3064e1e8c6513da3 = new Set();
 let $cfcd56242923775d$var$has_ran = false;
 function $cfcd56242923775d$export$5162a71f252e6122() {
@@ -2645,8 +2645,12 @@ const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   const src_options = $52FdA$solidjs.createMemo(() => {
-    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]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $858fdcf73148519f$var$generateImageUrl)(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], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2786,8 +2790,8 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $858fdcf73148519f$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $858fdcf73148519f$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$var$generateImageUrl)(url, width), " ").concat(width, "w")).join(", ");
 }
 function $858fdcf73148519f$var$generateImageUrl(url, width) {
   // 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)
@@ -2852,14 +2856,13 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
   return container;
 }
 function $9e470232a6b789a3$export$9d4a4b669b1929ab(props) {
-  const src = $52FdA$solidjs.createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $52FdA$solidjsweb.createComponent((0, $28535bb7671c63d1$export$e4b984597b71e989), $52FdA$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url)
+      };
     }
   }));
 }
@@ -2912,8 +2915,8 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
     return _el$;
   })();
   const image_urls = $52FdA$solidjs.createMemo(() => {
-    var _listing_2;
-    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : _listing_2.image_urls;
+    var _listing_2, _listing_2$image_urls;
+    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : (_listing_2$image_urls = _listing_2.image_urls) === null || _listing_2$image_urls === void 0 ? void 0 : _listing_2$image_urls.slice(0, 3);
   });
   const [isSelected, selectedDueToKeyboardNavigation] = $b0f8d9f49e018db9$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $52FdA$solidjs.createMemo(() => {

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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.1";
+export const version = "4.1.3";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * 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.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.1";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.3";
 const $68e6625c8d51f847$export$3064e1e8c6513da3 = new Set();
 let $68e6625c8d51f847$var$has_ran = false;
 function $68e6625c8d51f847$export$5162a71f252e6122() {
@@ -2557,8 +2557,12 @@ const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $56047603f9d212b6$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   const src_options = $8tj43$createMemo(() => {
-    const fallback_src = $56047603f9d212b6$var$generateImageUrl(props.src, 400);
-    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $56047603f9d212b6$var$generateImageUrl)(src, 400);
+    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2698,8 +2702,8 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $56047603f9d212b6$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $56047603f9d212b6$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $56047603f9d212b6$var$generateImageUrl)(url, width), " ").concat(width, "w")).join(", ");
 }
 function $56047603f9d212b6$var$generateImageUrl(url, width) {
   // 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)
@@ -2764,14 +2768,13 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   return container;
 }
 function $7fbaab3d3dafb4f5$export$9d4a4b669b1929ab(props) {
-  const src = $8tj43$createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $8tj43$createComponent((0, $4df489344a0f97c7$export$e4b984597b71e989), $8tj43$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url)
+      };
     }
   }));
 }
@@ -2824,8 +2827,8 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
     return _el$;
   })();
   const image_urls = $8tj43$createMemo(() => {
-    var _listing_2;
-    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : _listing_2.image_urls;
+    var _listing_2, _listing_2$image_urls;
+    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : (_listing_2$image_urls = _listing_2.image_urls) === null || _listing_2$image_urls === void 0 ? void 0 : _listing_2$image_urls.slice(0, 3);
   });
   const [isSelected, selectedDueToKeyboardNavigation] = $d0883254246d3eb6$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $8tj43$createMemo(() => {

package/latest/index.cjs

@@ -92,7 +92,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.1";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.3";
 const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
 let $d84fe647b84b5dc5$var$has_ran = false;
 function $d84fe647b84b5dc5$export$5162a71f252e6122() {
@@ -2539,8 +2539,12 @@ const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   const src_options = $gVhhF$solidjs.createMemo(() => {
-    const fallback_src = $19950faaac026e09$var$generateImageUrl(props.src, 400);
-    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $19950faaac026e09$var$generateImageUrl)(src, 400);
+    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2677,8 +2681,8 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $19950faaac026e09$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $19950faaac026e09$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $19950faaac026e09$var$generateImageUrl)(url, width)} ${width}w`).join(", ");
 }
 function $19950faaac026e09$var$generateImageUrl(url, width) {
   // 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)
@@ -2741,14 +2745,13 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   return container;
 }
 function $e8327f98c8ee28d7$export$9d4a4b669b1929ab(props) {
-  const src = $gVhhF$solidjs.createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $gVhhF$solidjsweb.createComponent((0, $a33065cfed827fc0$export$e4b984597b71e989), $gVhhF$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`
+      };
     }
   }));
 }
@@ -2796,7 +2799,7 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
-  const image_urls = $gVhhF$solidjs.createMemo(() => listing_()?.image_urls);
+  const image_urls = $gVhhF$solidjs.createMemo(() => listing_()?.image_urls?.slice(0, 3));
   const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $gVhhF$solidjs.createMemo(() => listing_()?.ancestors);
   return (() => {

package/latest/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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.1";
+export const version = "4.1.3";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * 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.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$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.1.1";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.3";
 const $90980bd87c9960f9$export$3064e1e8c6513da3 = new Set();
 let $90980bd87c9960f9$var$has_ran = false;
 function $90980bd87c9960f9$export$5162a71f252e6122() {
@@ -2454,8 +2454,12 @@ const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   const src_options = $9HbP8$createMemo(() => {
-    const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(props.src, 400);
-    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $e8ffe11ed01df0fe$var$generateImageUrl)(src, 400);
+    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2592,8 +2596,8 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $e8ffe11ed01df0fe$var$generateImageUrl)(url, width)} ${width}w`).join(", ");
 }
 function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
   // 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)
@@ -2656,14 +2660,13 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   return container;
 }
 function $4f16612bea257571$export$9d4a4b669b1929ab(props) {
-  const src = $9HbP8$createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $9HbP8$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $9HbP8$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`
+      };
     }
   }));
 }
@@ -2711,7 +2714,7 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
-  const image_urls = $9HbP8$createMemo(() => listing_()?.image_urls);
+  const image_urls = $9HbP8$createMemo(() => listing_()?.image_urls?.slice(0, 3));
   const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $9HbP8$createMemo(() => listing_()?.ancestors);
   return (() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",

package/server/ES10/index.cjs

@@ -98,7 +98,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.1.1";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.1.3";
 const $cfcd56242923775d$export$3064e1e8c6513da3 = new Set();
 let $cfcd56242923775d$var$has_ran = false;
 function $cfcd56242923775d$export$5162a71f252e6122() {
@@ -2075,8 +2075,12 @@ const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   const src_options = $3hooq$solidjs.createMemo(() => {
-    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]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $858fdcf73148519f$var$generateImageUrl)(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], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2216,8 +2220,8 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $858fdcf73148519f$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $858fdcf73148519f$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $858fdcf73148519f$var$generateImageUrl)(url, width), " ").concat(width, "w")).join(", ");
 }
 function $858fdcf73148519f$var$generateImageUrl(url, width) {
   // 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)
@@ -2282,14 +2286,13 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
   return container;
 }
 function $9e470232a6b789a3$export$9d4a4b669b1929ab(props) {
-  const src = $3hooq$solidjs.createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $3hooq$solidjsweb.createComponent((0, $28535bb7671c63d1$export$e4b984597b71e989), $3hooq$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url)
+      };
     }
   }));
 }
@@ -2325,8 +2328,8 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
     }
   }), undefined, true);
   const image_urls = $3hooq$solidjs.createMemo(() => {
-    var _listing_2;
-    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : _listing_2.image_urls;
+    var _listing_2, _listing_2$image_urls;
+    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : (_listing_2$image_urls = _listing_2.image_urls) === null || _listing_2$image_urls === void 0 ? void 0 : _listing_2$image_urls.slice(0, 3);
   });
   const [isSelected, selectedDueToKeyboardNavigation] = $b0f8d9f49e018db9$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $3hooq$solidjs.createMemo(() => {

package/server/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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.1";
+export const version = "4.1.3";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * 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.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.1";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.1.3";
 const $68e6625c8d51f847$export$3064e1e8c6513da3 = new Set();
 let $68e6625c8d51f847$var$has_ran = false;
 function $68e6625c8d51f847$export$5162a71f252e6122() {
@@ -1987,8 +1987,12 @@ const $56047603f9d212b6$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $56047603f9d212b6$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   const src_options = $b8hua$createMemo(() => {
-    const fallback_src = $56047603f9d212b6$var$generateImageUrl(props.src, 400);
-    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $56047603f9d212b6$var$generateImageUrl)(src, 400);
+    const srcset = $56047603f9d212b6$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2128,8 +2132,8 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $56047603f9d212b6$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+function $56047603f9d212b6$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => "".concat((customGenerateImageUrl_ || $56047603f9d212b6$var$generateImageUrl)(url, width), " ").concat(width, "w")).join(", ");
 }
 function $56047603f9d212b6$var$generateImageUrl(url, width) {
   // 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)
@@ -2194,14 +2198,13 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   return container;
 }
 function $7fbaab3d3dafb4f5$export$9d4a4b669b1929ab(props) {
-  const src = $b8hua$createMemo(() => {
-    const urlObject = new URL("https://img.depict.ai/ResizeImage/".concat(props.merchant_, "?format=webp"));
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $b8hua$createComponent((0, $4df489344a0f97c7$export$e4b984597b71e989), $b8hua$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => "https://app.depict.ai/cdn-cgi/image/width=".concat(width, ",format=auto/").concat(url)
+      };
     }
   }));
 }
@@ -2237,8 +2240,8 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
     }
   }), undefined, true);
   const image_urls = $b8hua$createMemo(() => {
-    var _listing_2;
-    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : _listing_2.image_urls;
+    var _listing_2, _listing_2$image_urls;
+    return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : (_listing_2$image_urls = _listing_2.image_urls) === null || _listing_2$image_urls === void 0 ? void 0 : _listing_2$image_urls.slice(0, 3);
   });
   const [isSelected, selectedDueToKeyboardNavigation] = $d0883254246d3eb6$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $b8hua$createMemo(() => {

package/server/latest/index.cjs

@@ -92,7 +92,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.1";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.1.3";
 const $d84fe647b84b5dc5$export$3064e1e8c6513da3 = new Set();
 let $d84fe647b84b5dc5$var$has_ran = false;
 function $d84fe647b84b5dc5$export$5162a71f252e6122() {
@@ -1983,8 +1983,12 @@ const $19950faaac026e09$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $19950faaac026e09$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $19950faaac026e09$export$6e5611bc7e57e477(props) {
   const src_options = $5vyXB$solidjs.createMemo(() => {
-    const fallback_src = $19950faaac026e09$var$generateImageUrl(props.src, 400);
-    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $19950faaac026e09$var$generateImageUrl)(src, 400);
+    const srcset = $19950faaac026e09$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2121,8 +2125,8 @@ function $19950faaac026e09$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $19950faaac026e09$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $19950faaac026e09$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $19950faaac026e09$var$generateImageUrl)(url, width)} ${width}w`).join(", ");
 }
 function $19950faaac026e09$var$generateImageUrl(url, width) {
   // 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)
@@ -2185,14 +2189,13 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   return container;
 }
 function $e8327f98c8ee28d7$export$9d4a4b669b1929ab(props) {
-  const src = $5vyXB$solidjs.createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $5vyXB$solidjsweb.createComponent((0, $a33065cfed827fc0$export$e4b984597b71e989), $5vyXB$solidjsweb.mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`
+      };
     }
   }));
 }
@@ -2223,7 +2226,7 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
       return href();
     }
   }), undefined, true);
-  const image_urls = $5vyXB$solidjs.createMemo(() => listing_()?.image_urls);
+  const image_urls = $5vyXB$solidjs.createMemo(() => listing_()?.image_urls?.slice(0, 3));
   const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $5vyXB$solidjs.createMemo(() => listing_()?.ancestors);
   return $5vyXB$solidjsweb.ssr($1f3b5fa875714dea$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(LinkToListing, {

package/server/latest/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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.1";
+export const version = "4.1.3";
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * 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.
@@ -434,10 +434,10 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
 export function ShopifyResponsiveImg(props: {
   resolutions?: number[];
   size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
   src: string;
   loading?: "eager" | "lazy" | "force-lazy";
-}): JSX.Element;
+  customGenerateImageUrl_?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
 type ImagePlaceholderBaseOptions = {
   style?: JSX.CSSProperties;
   class?: string;
@@ -1246,7 +1246,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1386,7 +1386,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;

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.1.1";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.1.3";
 const $90980bd87c9960f9$export$3064e1e8c6513da3 = new Set();
 let $90980bd87c9960f9$var$has_ran = false;
 function $90980bd87c9960f9$export$5162a71f252e6122() {
@@ -1898,8 +1898,12 @@ const $e8ffe11ed01df0fe$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingCo
 const $e8ffe11ed01df0fe$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   const src_options = $i7OB2$createMemo(() => {
-    const fallback_src = $e8ffe11ed01df0fe$var$generateImageUrl(props.src, 400);
-    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096]);
+    const {
+      src: src,
+      customGenerateImageUrl_: customGenerateImageUrl_
+    } = props;
+    const fallback_src = (customGenerateImageUrl_ || $e8ffe11ed01df0fe$var$generateImageUrl)(src, 400);
+    const srcset = $e8ffe11ed01df0fe$var$make_srcset(props.src, props.resolutions || [64, 128, 256, 300, 400, 512, 640, 768, 1024, 1280, 1536, 2048, 2560, 3072, 3584, 4096], customGenerateImageUrl_);
     // The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
     return {
       srcset: srcset,
@@ -2036,8 +2040,8 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     children: img
   });
 }
-function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions, customGenerateImageUrl_) {
+  return resolutions.map(width => `${(customGenerateImageUrl_ || $e8ffe11ed01df0fe$var$generateImageUrl)(url, width)} ${width}w`).join(", ");
 }
 function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
   // 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)
@@ -2100,14 +2104,13 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   return container;
 }
 function $4f16612bea257571$export$9d4a4b669b1929ab(props) {
-  const src = $i7OB2$createMemo(() => {
-    const urlObject = new URL(`https://img.depict.ai/ResizeImage/${props.merchant_}?format=webp`);
-    urlObject.searchParams.set("url", props.src);
-    return urlObject.href;
-  });
   return $i7OB2$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $i7OB2$mergeProps(props, {
-    get src() {
-      return src();
+    get imgProps() {
+      return {
+        ...props.imgProps,
+        customGenerateImageUrl_: (url, width // Apparently don't have to encode url for CF's service
+        ) => `https://app.depict.ai/cdn-cgi/image/width=${width},format=auto/${url}`
+      };
     }
   }));
 }
@@ -2138,7 +2141,7 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
       return href();
     }
   }), undefined, true);
-  const image_urls = $i7OB2$createMemo(() => listing_()?.image_urls);
+  const image_urls = $i7OB2$createMemo(() => listing_()?.image_urls?.slice(0, 3));
   const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $i7OB2$createMemo(() => listing_()?.ancestors);
   return $i7OB2$ssr($4ce5b8892775b62d$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $i7OB2$escape($i7OB2$createComponent(LinkToListing, {