@depict-ai/ui 4.0.7 → 4.0.9
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 +112 -57
- package/ES10/index.d.ts +17 -4
- package/ES10/index.js +116 -63
- package/latest/index.cjs +110 -56
- package/latest/index.d.ts +17 -4
- package/latest/index.js +114 -62
- package/package.json +1 -1
- package/server/ES10/index.cjs +112 -57
- package/server/ES10/index.d.ts +17 -4
- package/server/ES10/index.js +116 -63
- package/server/latest/index.cjs +110 -56
- package/server/latest/index.d.ts +17 -4
- package/server/latest/index.js +114 -62
package/server/ES10/index.cjs
CHANGED
|
@@ -35,6 +35,8 @@ $parcel$export(module.exports, "decode_sorting", () => $a68b73fd7ba0853f$export$
|
|
|
35
35
|
$parcel$export(module.exports, "shopifyContainedImageContextSymbol", () => $28535bb7671c63d1$export$d7b7ab832c20e2f4);
|
|
36
36
|
$parcel$export(module.exports, "ListingProvider", () => $d067f3a30f047b41$export$e68cff63f76bd15b);
|
|
37
37
|
$parcel$export(module.exports, "useListing", () => $d067f3a30f047b41$export$8d0c4fdbb05a2f2e);
|
|
38
|
+
$parcel$export(module.exports, "ProductCardIndexProvider", () => $b54645378dfc7280$export$11354f017ddc9790);
|
|
39
|
+
$parcel$export(module.exports, "useProductCardIndex", () => $b54645378dfc7280$export$e3faf4d95300054f);
|
|
38
40
|
$parcel$export(module.exports, "ShopifyContainedImage", () => $28535bb7671c63d1$export$e4b984597b71e989);
|
|
39
41
|
$parcel$export(module.exports, "SlidableItems", () => $ad8ec7729fffeb9c$export$6649caad96ef8870);
|
|
40
42
|
$parcel$export(module.exports, "make_accurate_width_accessor", () => $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd);
|
|
@@ -92,7 +94,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
|
|
|
92
94
|
$parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
|
|
93
95
|
$parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
|
|
94
96
|
/*! Depict.ai search and product listing SDK */
|
|
95
|
-
const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.
|
|
97
|
+
const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.9";
|
|
96
98
|
function $a28000bc10de28ad$export$e417c49320921907(dependency, fetcher) {
|
|
97
99
|
const [promiseOfCurrentFetcherRun, setPromiseOfCurrentFetcherRun] = $3hooq$solidjs.createSignal();
|
|
98
100
|
const deparallelizedFetcher = $3hooq$depictaiutilishared.deparallelize_no_drop(async dependencyValue => {
|
|
@@ -343,6 +345,20 @@ function $e82d0d417fa613e8$var$unwrapping_helper(elements) {
|
|
|
343
345
|
} else if (typeof elements == "function") result.push(...$e82d0d417fa613e8$var$unwrapping_helper(elements()));else if (elements != undefined && typeof elements != "boolean") result.push(elements);
|
|
344
346
|
return result;
|
|
345
347
|
}
|
|
348
|
+
const $b54645378dfc7280$var$ProductCardIndexContext = /*@__PURE__*/$3hooq$solidjs.createContext();
|
|
349
|
+
function $b54645378dfc7280$export$11354f017ddc9790(props) {
|
|
350
|
+
return $3hooq$solidjsweb.createComponent($b54645378dfc7280$var$ProductCardIndexContext.Provider, {
|
|
351
|
+
get value() {
|
|
352
|
+
return props.index_;
|
|
353
|
+
},
|
|
354
|
+
get children() {
|
|
355
|
+
return props.children;
|
|
356
|
+
}
|
|
357
|
+
});
|
|
358
|
+
}
|
|
359
|
+
function $b54645378dfc7280$export$e3faf4d95300054f() {
|
|
360
|
+
return $3hooq$solidjs.useContext($b54645378dfc7280$var$ProductCardIndexContext);
|
|
361
|
+
}
|
|
346
362
|
let $76012c4468a53d1f$var$printedCloneError = false;
|
|
347
363
|
function $76012c4468a53d1f$export$7f8bd308237ab5a5(get_displays_) {
|
|
348
364
|
const displays_by_key_ = $3hooq$solidjs.createMemo(() => {
|
|
@@ -400,9 +416,22 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
|
|
|
400
416
|
$3hooq$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);
|
|
401
417
|
}
|
|
402
418
|
}
|
|
403
|
-
|
|
404
|
-
|
|
419
|
+
let renderingResult;
|
|
420
|
+
// Wrap the product card in a ProductCardIndexProvider so that the index is available to the product card
|
|
421
|
+
// This is wo we can do intelligent image loading in ShopifyContainedImage without shopify devs having to pass in the index
|
|
422
|
+
// 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
|
|
423
|
+
$b54645378dfc7280$export$11354f017ddc9790({
|
|
424
|
+
index_: index,
|
|
425
|
+
get children() {
|
|
426
|
+
// 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
|
|
427
|
+
renderingResult = product_card_template_(display, {
|
|
428
|
+
set_on_index_change: fn => $3hooq$solidjs.runWithOwner(owner, () => $3hooq$solidjs.createEffect(() => fn(index())))
|
|
429
|
+
});
|
|
430
|
+
return undefined; // just to satisfy the typing
|
|
431
|
+
}
|
|
405
432
|
});
|
|
433
|
+
// 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)
|
|
434
|
+
return renderingResult;
|
|
406
435
|
});
|
|
407
436
|
const node_accessor = $e82d0d417fa613e8$export$2f0cbfbb4354bb52(product_card_resource);
|
|
408
437
|
$3hooq$solidjs.createEffect(() => {
|
|
@@ -427,7 +456,8 @@ function $76012c4468a53d1f$export$43f0fb951fcb0c54(_ref) {
|
|
|
427
456
|
});
|
|
428
457
|
return [
|
|
429
458
|
// Show content block before product card, so it's *at* that index
|
|
430
|
-
possible_content_block,
|
|
459
|
+
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,
|
|
460
|
+
]; // Regarding the as unknown shenanigans: https://github.com/solidjs/solid/releases/tag/v1.7.0
|
|
431
461
|
}
|
|
432
462
|
});
|
|
433
463
|
}
|
|
@@ -1934,6 +1964,34 @@ var $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</di
|
|
|
1934
1964
|
function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
|
|
1935
1965
|
return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "".concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape("s-image-container", true), true)).concat($3hooq$solidjsweb.escape(props.class, true) || ""), $3hooq$solidjsweb.ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $3hooq$solidjsweb.escape(props.children));
|
|
1936
1966
|
}
|
|
1967
|
+
let $e4e98e5080f4386e$var$browserIsBugged = false;
|
|
1968
|
+
function $e4e98e5080f4386e$export$2972b890694ced75(callback, _ref) {
|
|
1969
|
+
let {
|
|
1970
|
+
timeout: timeout
|
|
1971
|
+
} = _ref;
|
|
1972
|
+
if ($e4e98e5080f4386e$var$browserIsBugged) timeout /= 4;
|
|
1973
|
+
const cancel = () => {
|
|
1974
|
+
cancelIdleCallback(idleHandle);
|
|
1975
|
+
clearTimeout(racingTimeout);
|
|
1976
|
+
};
|
|
1977
|
+
const idleHandle = requestIdleCallback(deadline => {
|
|
1978
|
+
cancel();
|
|
1979
|
+
return callback(deadline);
|
|
1980
|
+
}, {
|
|
1981
|
+
timeout: timeout
|
|
1982
|
+
});
|
|
1983
|
+
const racingTimeout = setTimeout(() => {
|
|
1984
|
+
$e4e98e5080f4386e$var$browserIsBugged = true;
|
|
1985
|
+
cancel();
|
|
1986
|
+
callback({
|
|
1987
|
+
didTimeout: false,
|
|
1988
|
+
timeRemaining() {
|
|
1989
|
+
return 500;
|
|
1990
|
+
}
|
|
1991
|
+
});
|
|
1992
|
+
}, timeout + 1000);
|
|
1993
|
+
return cancel;
|
|
1994
|
+
}
|
|
1937
1995
|
function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
|
|
1938
1996
|
const [size, setSize] = $3hooq$solidjs.createSignal(0);
|
|
1939
1997
|
const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => {
|
|
@@ -1961,23 +2019,11 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
|
|
|
1961
2019
|
}
|
|
1962
2020
|
const $858fdcf73148519f$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
|
|
1963
2021
|
const $858fdcf73148519f$export$f8945274f08a3105 = /*@__PURE__*/Symbol("listingContextAspectRatios");
|
|
2022
|
+
const $858fdcf73148519f$export$6066eb417ed2e9f7 = /*@__PURE__*/Symbol("listingContextAspectRatios");
|
|
1964
2023
|
function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
|
|
1965
|
-
// Enable reactive props
|
|
1966
|
-
const otherOptions = $3hooq$solidjs.createMemo(() => {
|
|
1967
|
-
const cloned_props = {
|
|
1968
|
-
...props
|
|
1969
|
-
};
|
|
1970
|
-
delete cloned_props.resolutions;
|
|
1971
|
-
// @ts-ignore
|
|
1972
|
-
delete cloned_props.size;
|
|
1973
|
-
// @ts-ignore
|
|
1974
|
-
delete cloned_props.src;
|
|
1975
|
-
return cloned_props;
|
|
1976
|
-
});
|
|
1977
2024
|
const src_options = $3hooq$solidjs.createMemo(() => {
|
|
1978
|
-
const
|
|
1979
|
-
const
|
|
1980
|
-
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]);
|
|
2025
|
+
const fallback_src = $858fdcf73148519f$var$generateImageUrl(props.src, 400);
|
|
2026
|
+
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]);
|
|
1981
2027
|
// The order here *might* matter - I've seen mobile safari always start with loading the 400px version when it was reversed
|
|
1982
2028
|
return {
|
|
1983
2029
|
srcset: srcset,
|
|
@@ -1986,19 +2032,35 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
|
|
|
1986
2032
|
});
|
|
1987
2033
|
// Work around https://github.com/solidjs/solid/issues/1828
|
|
1988
2034
|
const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
|
|
2035
|
+
const [, otherAttributes] = $3hooq$solidjs.splitProps(props, ["resolutions", "size", "src", "srcSet", "loading"]);
|
|
1989
2036
|
const [hasSetSize, setHasSetSize] = $3hooq$solidjs.createSignal(false);
|
|
1990
2037
|
const [hasDecoded, setHasDecoded] = $3hooq$solidjs.createSignal(false);
|
|
2038
|
+
const productCardIndexAccessor = $b54645378dfc7280$export$e3faf4d95300054f();
|
|
1991
2039
|
const sizePX = $3hooq$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
|
|
1992
2040
|
const listingContext = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
|
|
2041
|
+
const isPrioritisedImage = $3hooq$solidjs.createMemo(() => (productCardIndexAccessor === null || productCardIndexAccessor === void 0 ? void 0 : productCardIndexAccessor()) < 8);
|
|
2042
|
+
const shouldActuallyEnableLazyLoading = $3hooq$solidjs.createMemo(() => {
|
|
2043
|
+
const {
|
|
2044
|
+
loading: loading
|
|
2045
|
+
} = props;
|
|
2046
|
+
if (loading === "force-lazy") return true;
|
|
2047
|
+
return loading === "lazy" && !isPrioritisedImage();
|
|
2048
|
+
});
|
|
2049
|
+
const modifiedOtherAttributes = $3hooq$solidjs.mergeProps(otherAttributes, {
|
|
2050
|
+
get loading() {
|
|
2051
|
+
return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
|
|
2052
|
+
}
|
|
2053
|
+
});
|
|
1993
2054
|
// 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
|
|
1994
2055
|
// Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
|
|
1995
2056
|
const executeWhenIdleBatched = fn => {
|
|
1996
2057
|
if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
|
|
2058
|
+
if ($3hooq$solidjs.untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
|
|
1997
2059
|
const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
|
|
1998
2060
|
if (existingStack) return existingStack.add(fn);
|
|
1999
2061
|
const newStack = new Set([fn]);
|
|
2000
2062
|
if (listingContext) listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol] = newStack;
|
|
2001
|
-
const processStackWhenIdle = () =>
|
|
2063
|
+
const processStackWhenIdle = () => $e4e98e5080f4386e$export$2972b890694ced75($3hooq$depictaiutilishared.catchify(deadline => {
|
|
2002
2064
|
const start = performance.now();
|
|
2003
2065
|
const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
|
|
2004
2066
|
for (const fn of newStack) {
|
|
@@ -2013,7 +2075,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
|
|
|
2013
2075
|
}
|
|
2014
2076
|
// Stack is empty
|
|
2015
2077
|
if (listingContext) delete listingContext[$858fdcf73148519f$var$onIdleFunctionsSymbol];
|
|
2016
|
-
}, {
|
|
2078
|
+
}), {
|
|
2017
2079
|
timeout: 15000
|
|
2018
2080
|
} // 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
|
|
2019
2081
|
);
|
|
@@ -2027,7 +2089,8 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
|
|
|
2027
2089
|
img.classList.add("s-responsive-image");
|
|
2028
2090
|
if (listingContext) {
|
|
2029
2091
|
let prevValue;
|
|
2030
|
-
const aspectRatios = listingContext[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new (
|
|
2092
|
+
const aspectRatios = listingContext[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new Set());
|
|
2093
|
+
const [, setMostPrevalentAspectRatio] = listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] || (listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] = $3hooq$solidjs.createSignal());
|
|
2031
2094
|
img.addEventListener("load", $3hooq$depictaiutilishared.catchify(() => {
|
|
2032
2095
|
// Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
|
|
2033
2096
|
const aspectRatio_ = img.naturalWidth / img.naturalHeight;
|
|
@@ -2037,13 +2100,22 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
|
|
|
2037
2100
|
} : undefined;
|
|
2038
2101
|
if (newValue) aspectRatios.add(newValue);
|
|
2039
2102
|
prevValue = newValue;
|
|
2103
|
+
// Do all calculations resulting of an update directly, for performance
|
|
2104
|
+
const asArray = [...aspectRatios].map(_ref2 => {
|
|
2105
|
+
let {
|
|
2106
|
+
aspectRatio_: aspectRatio_
|
|
2107
|
+
} = _ref2;
|
|
2108
|
+
return aspectRatio_;
|
|
2109
|
+
});
|
|
2110
|
+
const mostPrevalentAspectRatio = $3hooq$depictaiutilishared.findMostFrequentItem(asArray);
|
|
2111
|
+
setMostPrevalentAspectRatio(mostPrevalentAspectRatio);
|
|
2040
2112
|
}));
|
|
2041
2113
|
$3hooq$solidjs.onCleanup(() => prevValue && aspectRatios.delete(prevValue));
|
|
2042
2114
|
}
|
|
2043
2115
|
$3hooq$solidjs.onCleanup(() => gotCleanedUp = true);
|
|
2044
|
-
$3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(
|
|
2116
|
+
$3hooq$solidjsweb.spread(img, $3hooq$solidjs.mergeProps(modifiedOtherAttributes), false, true);
|
|
2045
2117
|
$3hooq$solidjs.createEffect(() => {
|
|
2046
|
-
if (!props.size()) return; // wait until we have a size
|
|
2118
|
+
if (!props.size()) return; // wait until we have a size, run every time the size changes
|
|
2047
2119
|
if (timeoutSet) return;
|
|
2048
2120
|
const handler = $3hooq$depictaiutilishared.catchify(() => {
|
|
2049
2121
|
if (gotCleanedUp) return;
|
|
@@ -2068,7 +2140,7 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
|
|
|
2068
2140
|
// We can do this because there has to be a container around us giving us a size
|
|
2069
2141
|
// No need to listen if we're already in the DOM
|
|
2070
2142
|
if (hasDecodedFastPath) return;
|
|
2071
|
-
if (
|
|
2143
|
+
if (shouldActuallyEnableLazyLoading()) {
|
|
2072
2144
|
// For lazy loading there's no decoding to wait for as it only occurs when the image is visible
|
|
2073
2145
|
// Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
|
|
2074
2146
|
setHasDecoded(true);
|
|
@@ -2095,9 +2167,10 @@ function $858fdcf73148519f$var$make_srcset(url, resolutions) {
|
|
|
2095
2167
|
return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
|
|
2096
2168
|
}
|
|
2097
2169
|
function $858fdcf73148519f$var$generateImageUrl(url, width) {
|
|
2098
|
-
//
|
|
2099
|
-
url
|
|
2100
|
-
|
|
2170
|
+
// 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)
|
|
2171
|
+
// 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)
|
|
2172
|
+
// That way we can just to string concatenation which is insanely fast
|
|
2173
|
+
return url + "&width=" + encodeURIComponent(width);
|
|
2101
2174
|
}
|
|
2102
2175
|
const $28535bb7671c63d1$var$backupSizeSignal = /*@__PURE__*/$3hooq$solidjs.createSignal();
|
|
2103
2176
|
const $28535bb7671c63d1$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
|
|
@@ -2107,41 +2180,23 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
|
|
|
2107
2180
|
// create a signal that's the same for all items in this listing
|
|
2108
2181
|
context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $3hooq$solidjs.createSignal();
|
|
2109
2182
|
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
|
|
2110
|
-
const
|
|
2111
|
-
const
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
const aspectRatioToUse = $3hooq$solidjs.createMemo(() => {
|
|
2115
|
-
const aspectRatiosSet = aspectRatios(); // This signal "changes" to the same set every time the set changes, so we can use it as a dependency here
|
|
2116
|
-
useMostPrevalentAspectRatio: {
|
|
2117
|
-
if (!aspectRatiosSet || !props.autoAdjustAspectRatio) break useMostPrevalentAspectRatio;
|
|
2118
|
-
// Get the aspect ratio that most of the loaded images inside the ListingProvider we are, load
|
|
2119
|
-
const asArray = [...aspectRatiosSet].map(_ref => {
|
|
2120
|
-
let {
|
|
2121
|
-
aspectRatio_: aspectRatio_
|
|
2122
|
-
} = _ref;
|
|
2123
|
-
return aspectRatio_;
|
|
2124
|
-
});
|
|
2125
|
-
const mostPrevalentAspectRatio = $3hooq$depictaiutilishared.findMostFrequentItem(asArray);
|
|
2126
|
-
if (mostPrevalentAspectRatio) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(mostPrevalentAspectRatio, ")");
|
|
2127
|
-
}
|
|
2128
|
-
return props.aspectRatio;
|
|
2129
|
-
});
|
|
2130
|
-
const container = $3hooq$solidjsweb.createComponent((0, $ce467edb5343cfcd$export$94026ee33dbabc26), {
|
|
2131
|
-
get aspectRatio() {
|
|
2132
|
-
return aspectRatioToUse();
|
|
2133
|
-
},
|
|
2134
|
-
get ["class"]() {
|
|
2183
|
+
const [mostPrevalentAspectRatio] = context ? context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] || (context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] = $3hooq$solidjs.createSignal()) : [];
|
|
2184
|
+
const container = $ce467edb5343cfcd$export$94026ee33dbabc26({
|
|
2185
|
+
// Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
|
|
2186
|
+
get class() {
|
|
2135
2187
|
return props.class;
|
|
2188
|
+
},
|
|
2189
|
+
get aspectRatio() {
|
|
2190
|
+
if (props.autoAdjustAspectRatio) {
|
|
2191
|
+
const targetRatio = mostPrevalentAspectRatio === null || mostPrevalentAspectRatio === void 0 ? void 0 : mostPrevalentAspectRatio();
|
|
2192
|
+
if (targetRatio != undefined) return "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
|
|
2193
|
+
}
|
|
2194
|
+
return props.aspectRatio;
|
|
2136
2195
|
}
|
|
2137
2196
|
});
|
|
2138
2197
|
const owner = $3hooq$solidjs.getOwner();
|
|
2139
2198
|
let createdSizeAccessor = false;
|
|
2140
2199
|
let wasCleanedUp = false;
|
|
2141
|
-
for (const event of ["add", "delete"]) {
|
|
2142
|
-
aspectRatiosSet === null || aspectRatiosSet === void 0 || aspectRatiosSet.addEventListener(event, () => setAspectRatios(aspectRatiosSet));
|
|
2143
|
-
$3hooq$solidjs.onCleanup(() => aspectRatiosSet === null || aspectRatiosSet === void 0 ? void 0 : aspectRatiosSet.removeEventListener(event, () => setAspectRatios(aspectRatiosSet)));
|
|
2144
|
-
}
|
|
2145
2200
|
$3hooq$solidjs.createEffect(() => {
|
|
2146
2201
|
if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
|
|
2147
2202
|
// ensure we always have a size accessor
|
package/server/ES10/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ 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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
|
|
13
|
-
export const version = "4.0.
|
|
13
|
+
export const version = "4.0.9";
|
|
14
14
|
export type ModalAlignmentSignals = {
|
|
15
15
|
body_: Signal<JSX.CSSProperties>;
|
|
16
16
|
field_: Signal<JSX.CSSProperties>;
|
|
@@ -388,6 +388,17 @@ export function ImageContainer(props: {
|
|
|
388
388
|
class?: string;
|
|
389
389
|
children?: JSX.Element;
|
|
390
390
|
}): HTMLDivElement;
|
|
391
|
+
/**
|
|
392
|
+
* 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.
|
|
393
|
+
*/
|
|
394
|
+
export function ProductCardIndexProvider(props: {
|
|
395
|
+
children: JSX.Element;
|
|
396
|
+
index_: Accessor<number>;
|
|
397
|
+
}): JSX.Element;
|
|
398
|
+
/**
|
|
399
|
+
* Use this to get an accessor containing the index of your product card.
|
|
400
|
+
*/
|
|
401
|
+
export function useProductCardIndex(): Accessor<number> | undefined;
|
|
391
402
|
/**
|
|
392
403
|
* Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
|
|
393
404
|
*/
|
|
@@ -395,6 +406,7 @@ export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
|
|
|
395
406
|
/**
|
|
396
407
|
* Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
|
|
397
408
|
* Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
|
|
409
|
+
* 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").
|
|
398
410
|
* This is used for our responsive images:
|
|
399
411
|
* 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.
|
|
400
412
|
* 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>;
|
|
|
404
416
|
export function ShopifyResponsiveImg(props: {
|
|
405
417
|
resolutions?: number[];
|
|
406
418
|
size: Accessor<number>;
|
|
407
|
-
} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
|
|
419
|
+
} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading"> & {
|
|
408
420
|
src: string;
|
|
421
|
+
loading?: "eager" | "lazy" | "force-lazy";
|
|
409
422
|
}): JSX.Element;
|
|
410
423
|
type ImagePlaceholderBaseOptions = {
|
|
411
424
|
style?: JSX.CSSProperties;
|
|
@@ -1194,7 +1207,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
|
|
|
1194
1207
|
on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
|
|
1195
1208
|
content_blocks_by_row?: ContentBlocksByRow;
|
|
1196
1209
|
layout?: PossibleLayout;
|
|
1197
|
-
}): import("@depict-ai/utilishared").Node_Array;
|
|
1210
|
+
}): import("@depict-ai/utilishared/latest").Node_Array;
|
|
1198
1211
|
export function BreadCrumbs<T extends Display>({
|
|
1199
1212
|
depict_category
|
|
1200
1213
|
}: {
|
|
@@ -1326,7 +1339,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
|
|
|
1326
1339
|
* Open the modal with support for alignment.
|
|
1327
1340
|
* @returns {void}
|
|
1328
1341
|
*/
|
|
1329
|
-
export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends
|
|
1342
|
+
export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
|
|
1330
1343
|
export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
|
|
1331
1344
|
export interface PageReplacer {
|
|
1332
1345
|
readonly render_: () => Node_Array;
|