@depict-ai/ui 4.7.32 → 4.7.34
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 +1648 -1615
- package/ES10/index.d.ts +182 -165
- package/ES10/index.js +1866 -1836
- package/latest/index.cjs +1322 -1296
- package/latest/index.d.ts +182 -165
- package/latest/index.js +1805 -1782
- package/package.json +1 -1
- package/server/ES10/index.cjs +588 -555
- package/server/ES10/index.d.ts +182 -165
- package/server/ES10/index.js +748 -718
- package/server/latest/index.cjs +598 -572
- package/server/latest/index.d.ts +182 -165
- package/server/latest/index.js +756 -733
package/server/ES10/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { JSX, Accessor, Setter, Signal } from "solid-js";
|
|
2
|
-
import { report, Amazing_Slider,
|
|
3
|
-
import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
|
|
2
|
+
import { Display, ModernDisplay, report, Amazing_Slider, useExpandingContainer, ColsAtSize, Elem, Node_Array } from "@depict-ai/utilishared/ES10";
|
|
4
3
|
import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
|
|
5
4
|
import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
|
|
6
5
|
import { ProductListing, GetListingResponse, ContentBlock as _ContentBlock1 } from "@depict-ai/types/api/GetListingResponse";
|
|
6
|
+
import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
|
|
7
7
|
import { ProductListingResponseV3, SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/ProductListingResponseV3";
|
|
8
8
|
import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
|
|
9
9
|
import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequestV3";
|
|
@@ -11,29 +11,67 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
|
|
|
11
11
|
import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
|
|
12
12
|
import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
|
|
13
13
|
import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
|
|
14
|
-
export const version = "4.7.
|
|
14
|
+
export const version = "4.7.34";
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
17
|
-
|
|
18
|
-
export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
|
|
19
|
-
declare class SDKError extends Error {}
|
|
20
|
-
export class ProductCardError extends SDKError {
|
|
21
|
-
constructor(templateError: Error);
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* SentryErrorBoundaries within this provider will call getContext_ when an error happens and add that context to sentry
|
|
16
|
+
* Provider to wrap every listing (group of products) in
|
|
17
|
+
* Used for example for deduplicating ResizeObservers for responsive images
|
|
25
18
|
*/
|
|
26
|
-
export function
|
|
19
|
+
export function ListingProvider(props: {
|
|
27
20
|
children: JSX.Element;
|
|
28
|
-
getContext_: () => Record<string, any>;
|
|
29
21
|
}): JSX.Element;
|
|
30
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Use this to get the context object if your component is within a ListingProvider
|
|
24
|
+
*/
|
|
25
|
+
export function useListing(): Record<symbol, any> | undefined;
|
|
26
|
+
/**
|
|
27
|
+
* ImageContainer for using the padding hack to set the aspect ratio of an image
|
|
28
|
+
* 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)
|
|
29
|
+
* (Not using the CSS aspect-ratio property yet here due to browser support)
|
|
30
|
+
*/
|
|
31
|
+
export function ImageContainer(props: {
|
|
32
|
+
aspectRatio: number | string;
|
|
33
|
+
class?: string;
|
|
34
|
+
children?: JSX.Element;
|
|
35
|
+
}): HTMLDivElement;
|
|
36
|
+
/**
|
|
37
|
+
* 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.
|
|
38
|
+
*/
|
|
39
|
+
export function ProductCardIndexProvider(props: {
|
|
31
40
|
children: JSX.Element;
|
|
32
|
-
|
|
33
|
-
severity_: Parameters<typeof report>[1];
|
|
34
|
-
on_error_?: (retry: VoidFunction) => JSX.Element | void;
|
|
35
|
-
class_list_?: string[];
|
|
41
|
+
index_: Accessor<number>;
|
|
36
42
|
}): JSX.Element;
|
|
43
|
+
/**
|
|
44
|
+
* Use this to get an accessor containing the index of your product card.
|
|
45
|
+
*/
|
|
46
|
+
export function useProductCardIndex(): Accessor<number> | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
|
|
49
|
+
* Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
|
|
50
|
+
* 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").
|
|
51
|
+
* This is used for our responsive images:
|
|
52
|
+
* 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.
|
|
53
|
+
* 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
|
|
54
|
+
* 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.
|
|
55
|
+
* You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
|
|
56
|
+
*/
|
|
57
|
+
export function ShopifyResponsiveImg(props: {
|
|
58
|
+
resolutions?: number[];
|
|
59
|
+
/**
|
|
60
|
+
* Width of the container, we'll load an image with that width
|
|
61
|
+
*/
|
|
62
|
+
size: Accessor<number>;
|
|
63
|
+
/**
|
|
64
|
+
* Height of the container, if set we will use this to still load sharp images even when object-fit is set to "cover", and the image is "zoomed" in on the x-axis.
|
|
65
|
+
*/
|
|
66
|
+
sizeHeight?: Accessor<number>;
|
|
67
|
+
src: string;
|
|
68
|
+
loading?: "eager" | "lazy" | "force-lazy";
|
|
69
|
+
customUrls?: (url: string, width: number) => string;
|
|
70
|
+
/**
|
|
71
|
+
* When `true`, data written for ShopifyContainedImage's `autoAdjustAspectRatio` feature will only be allowed to be written the load after the image src has changed. This is to make css transitions on images whose size is animated smoother (since aspect ratio changing minimally as size changes will cause the transition to restart)
|
|
72
|
+
*/
|
|
73
|
+
keyRatioUpdating?: boolean;
|
|
74
|
+
} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
|
|
37
75
|
/**
|
|
38
76
|
* Base placeholder component used by ImagePlaceholder and TextPlaceholder
|
|
39
77
|
*/
|
|
@@ -62,6 +100,129 @@ type ImagePlaceholderImageOptions = {
|
|
|
62
100
|
* @property style extra styles to add to the placeholder
|
|
63
101
|
*/
|
|
64
102
|
export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
|
|
103
|
+
/**
|
|
104
|
+
* A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
|
|
105
|
+
* If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
|
|
106
|
+
* @property height height of the placeholder. Set to `1em` by default.
|
|
107
|
+
* @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
|
|
108
|
+
* @property class extra classes to add to the placeholder
|
|
109
|
+
* @property style extra styles to add to the placeholder
|
|
110
|
+
*/
|
|
111
|
+
export function TextPlaceholder(props: {
|
|
112
|
+
style?: JSX.CSSProperties;
|
|
113
|
+
height: string;
|
|
114
|
+
width: string;
|
|
115
|
+
class?: string;
|
|
116
|
+
}): JSX.Element;
|
|
117
|
+
export function DefaultInstantCardPlaceholder(): HTMLDivElement;
|
|
118
|
+
/**
|
|
119
|
+
* Returns two accessors (one width and one height) that will update when the size of the provided element changes, to be used with ResponsiveImg
|
|
120
|
+
*/
|
|
121
|
+
export function makeSizeAccessors(whatToWatch: HTMLElement): [Accessor<number>, Accessor<number>];
|
|
122
|
+
export const shopifyContainedImageContextSymbol: unique symbol;
|
|
123
|
+
/**
|
|
124
|
+
* Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
|
|
125
|
+
* Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
|
|
126
|
+
* Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
|
|
127
|
+
* This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
|
|
128
|
+
* @property src image source
|
|
129
|
+
* @property aspectRatio aspect ratio of the image
|
|
130
|
+
* @property class extra class to add to the container
|
|
131
|
+
* @property alt alt text for the image
|
|
132
|
+
* @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio.
|
|
133
|
+
* @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
|
|
134
|
+
*/
|
|
135
|
+
export function ShopifyContainedImage(props: {
|
|
136
|
+
src: string;
|
|
137
|
+
aspectRatio: number | string;
|
|
138
|
+
autoAdjustAspectRatio?: boolean;
|
|
139
|
+
class?: string;
|
|
140
|
+
imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
|
|
141
|
+
}): HTMLDivElement;
|
|
142
|
+
/**
|
|
143
|
+
* Hacks ShopifyContainedImage work even for non-shopify image urls by forcing the format to be WebP
|
|
144
|
+
*/
|
|
145
|
+
export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
|
|
146
|
+
/**
|
|
147
|
+
* Wrapper around ShopifyResponsiveImg (component that just does an image, without wrapping in div). The wrapper allows ShopifyResponsiveImg to work both with shopify CDN URLs and arbitrary URLs, where the latter will be fed through Depict's cloudflare resizer.
|
|
148
|
+
*/
|
|
149
|
+
export function ModernResponsiveImage(props: Parameters<typeof ShopifyResponsiveImg>[0]): import("solid-js").JSX.Element;
|
|
150
|
+
type DisplayTransformerAlwaysThereData = {
|
|
151
|
+
merchant: string;
|
|
152
|
+
market: string;
|
|
153
|
+
locale: string;
|
|
154
|
+
};
|
|
155
|
+
type CanBePromiseWrapped<T> = T | Promise<T>;
|
|
156
|
+
export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
|
|
157
|
+
page_url: string;
|
|
158
|
+
})[] : T[K] };
|
|
159
|
+
/**
|
|
160
|
+
* A ProductListing with ancestors added in, this is what we pass to the display transformers as the ancestors might be required to construct the URL
|
|
161
|
+
*/
|
|
162
|
+
type ProductListingWithAncestors = ProductListing & {
|
|
163
|
+
ancestors: Ancestors;
|
|
164
|
+
};
|
|
165
|
+
/**
|
|
166
|
+
* The displayTransformer for categories does not only get a list of ListingSuggestions, when a search query has listing suggestions, but also their ancestors since we show breadcrumbs for the listing suggestions. To let the user differentiate (since the suggestion ones can be added/removed but not the ancestors) we add a boolean is_suggestion to the listing suggestions passed to the displayTransformer.
|
|
167
|
+
*/
|
|
168
|
+
type ListingSuggestionForTransformer = (ListingSuggestion & {
|
|
169
|
+
is_suggestion: true;
|
|
170
|
+
}) | (Omit<ListingSuggestion, "suggestions_result_id"> & {
|
|
171
|
+
is_suggestion: false;
|
|
172
|
+
});
|
|
173
|
+
/**
|
|
174
|
+
* DisplayTransformers supersede pageURLCreator
|
|
175
|
+
* DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
176
|
+
*/
|
|
177
|
+
export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = {
|
|
178
|
+
products?: (options: DisplayTransformerAlwaysThereData & {
|
|
179
|
+
displays: InputDisplay[];
|
|
180
|
+
}) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
|
|
181
|
+
categories?: <T extends ProductListingWithAncestors | ListingSuggestionForTransformer>(options: DisplayTransformerAlwaysThereData & {
|
|
182
|
+
data: T[];
|
|
183
|
+
}) => CanBePromiseWrapped<(T & {
|
|
184
|
+
page_url: string;
|
|
185
|
+
})[]>;
|
|
186
|
+
contentResults?: (options: DisplayTransformerAlwaysThereData & {
|
|
187
|
+
data: ContentLink[];
|
|
188
|
+
}) => CanBePromiseWrapped<ContentLink[]>;
|
|
189
|
+
};
|
|
190
|
+
export type SomethingTakingADisplayTransformers<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
191
|
+
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
192
|
+
} : {
|
|
193
|
+
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
194
|
+
} : {
|
|
195
|
+
page_url_creator?: never;
|
|
196
|
+
display_transformers?: never;
|
|
197
|
+
};
|
|
198
|
+
export const getExtraDisplayTransformers: () => DisplayTransformers<any, any> | undefined;
|
|
199
|
+
/**
|
|
200
|
+
*
|
|
201
|
+
* @param displayTransformers
|
|
202
|
+
*/
|
|
203
|
+
export const setExtraDisplayTransformers: <InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay = ModernDisplayWithPageUrl<InputDisplay>>(displayTransformers: DisplayTransformers<InputDisplay, OutputDisplay>) => DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
204
|
+
/**
|
|
205
|
+
* Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
|
|
206
|
+
*/
|
|
207
|
+
export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
|
|
208
|
+
declare class SDKError extends Error {}
|
|
209
|
+
export class ProductCardError extends SDKError {
|
|
210
|
+
constructor(templateError: Error);
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* SentryErrorBoundaries within this provider will call getContext_ when an error happens and add that context to sentry
|
|
214
|
+
*/
|
|
215
|
+
export function ExtraSentryContextProvider(props: {
|
|
216
|
+
children: JSX.Element;
|
|
217
|
+
getContext_: () => Record<string, any>;
|
|
218
|
+
}): JSX.Element;
|
|
219
|
+
export function SentryErrorBoundary(props: {
|
|
220
|
+
children: JSX.Element;
|
|
221
|
+
message_: string;
|
|
222
|
+
severity_: Parameters<typeof report>[1];
|
|
223
|
+
on_error_?: (retry: VoidFunction) => JSX.Element | void;
|
|
224
|
+
class_list_?: string[];
|
|
225
|
+
}): JSX.Element;
|
|
65
226
|
/**
|
|
66
227
|
* The interface for a content block.
|
|
67
228
|
* Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
|
|
@@ -168,17 +329,6 @@ type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
|
|
|
168
329
|
actual_field?: string;
|
|
169
330
|
})[] : never;
|
|
170
331
|
type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
|
|
171
|
-
/**
|
|
172
|
-
* 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.
|
|
173
|
-
*/
|
|
174
|
-
export function ProductCardIndexProvider(props: {
|
|
175
|
-
children: JSX.Element;
|
|
176
|
-
index_: Accessor<number>;
|
|
177
|
-
}): JSX.Element;
|
|
178
|
-
/**
|
|
179
|
-
* Use this to get an accessor containing the index of your product card.
|
|
180
|
-
*/
|
|
181
|
-
export function useProductCardIndex(): Accessor<number> | undefined;
|
|
182
332
|
/**
|
|
183
333
|
* This is a function that will safely clone an object that may contain promises.
|
|
184
334
|
* It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.
|
|
@@ -244,91 +394,6 @@ export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
|
|
|
244
394
|
* When using insert_after_container, view more and view less buttons are not currently supported.
|
|
245
395
|
*/
|
|
246
396
|
export function SolidLayoutWithProvidedElement(props: Omit<SolidLayoutOptions, "children" | "element_attributes">, container_element: HTMLDivElement, insert_after_container?: boolean, container_class?: string): JSX.Element;
|
|
247
|
-
/**
|
|
248
|
-
* Provider to wrap every listing (group of products) in
|
|
249
|
-
* Used for example for deduplicating ResizeObservers for responsive images
|
|
250
|
-
*/
|
|
251
|
-
export function ListingProvider(props: {
|
|
252
|
-
children: JSX.Element;
|
|
253
|
-
}): JSX.Element;
|
|
254
|
-
/**
|
|
255
|
-
* Use this to get the context object if your component is within a ListingProvider
|
|
256
|
-
*/
|
|
257
|
-
export function useListing(): Record<symbol, any> | undefined;
|
|
258
|
-
/**
|
|
259
|
-
* A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
|
|
260
|
-
* If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
|
|
261
|
-
* @property height height of the placeholder. Set to `1em` by default.
|
|
262
|
-
* @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
|
|
263
|
-
* @property class extra classes to add to the placeholder
|
|
264
|
-
* @property style extra styles to add to the placeholder
|
|
265
|
-
*/
|
|
266
|
-
export function TextPlaceholder(props: {
|
|
267
|
-
style?: JSX.CSSProperties;
|
|
268
|
-
height: string;
|
|
269
|
-
width: string;
|
|
270
|
-
class?: string;
|
|
271
|
-
}): JSX.Element;
|
|
272
|
-
export function DefaultInstantCardPlaceholder(): HTMLDivElement;
|
|
273
|
-
/**
|
|
274
|
-
* ImageContainer for using the padding hack to set the aspect ratio of an image
|
|
275
|
-
* 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)
|
|
276
|
-
* (Not using the CSS aspect-ratio property yet here due to browser support)
|
|
277
|
-
*/
|
|
278
|
-
export function ImageContainer(props: {
|
|
279
|
-
aspectRatio: number | string;
|
|
280
|
-
class?: string;
|
|
281
|
-
children?: JSX.Element;
|
|
282
|
-
}): HTMLDivElement;
|
|
283
|
-
/**
|
|
284
|
-
* Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
|
|
285
|
-
*/
|
|
286
|
-
export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
|
|
287
|
-
/**
|
|
288
|
-
* Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
|
|
289
|
-
* Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
|
|
290
|
-
* 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").
|
|
291
|
-
* This is used for our responsive images:
|
|
292
|
-
* 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.
|
|
293
|
-
* 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
|
|
294
|
-
* 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.
|
|
295
|
-
* You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
|
|
296
|
-
*/
|
|
297
|
-
export function ShopifyResponsiveImg(props: {
|
|
298
|
-
resolutions?: number[];
|
|
299
|
-
size: Accessor<number>;
|
|
300
|
-
src: string;
|
|
301
|
-
loading?: "eager" | "lazy" | "force-lazy";
|
|
302
|
-
customUrls?: (url: string, width: number) => string;
|
|
303
|
-
/**
|
|
304
|
-
* When `true`, data written for ShopifyContainedImage's `autoAdjustAspectRatio` feature will only be allowed to be written the load after the image src has changed. This is to make css transitions on images whose size is animated smoother (since aspect ratio changing minimally as size changes will cause the transition to restart)
|
|
305
|
-
*/
|
|
306
|
-
keyRatioUpdating?: boolean;
|
|
307
|
-
} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
|
|
308
|
-
export const shopifyContainedImageContextSymbol: unique symbol;
|
|
309
|
-
/**
|
|
310
|
-
* Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
|
|
311
|
-
* Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
|
|
312
|
-
* Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
|
|
313
|
-
* This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
|
|
314
|
-
* @property src image source
|
|
315
|
-
* @property aspectRatio aspect ratio of the image
|
|
316
|
-
* @property class extra class to add to the container
|
|
317
|
-
* @property alt alt text for the image
|
|
318
|
-
* @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio.
|
|
319
|
-
* @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
|
|
320
|
-
*/
|
|
321
|
-
export function ShopifyContainedImage(props: {
|
|
322
|
-
src: string;
|
|
323
|
-
aspectRatio: number | string;
|
|
324
|
-
autoAdjustAspectRatio?: boolean;
|
|
325
|
-
class?: string;
|
|
326
|
-
imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
|
|
327
|
-
}): HTMLDivElement;
|
|
328
|
-
/**
|
|
329
|
-
* Hacks ShopifyContainedImage work even for non-shopify image urls by forcing the format to be WebP
|
|
330
|
-
*/
|
|
331
|
-
export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
|
|
332
397
|
/**
|
|
333
398
|
* PLP internationalisation shared between search and category listing
|
|
334
399
|
*/
|
|
@@ -434,54 +499,6 @@ export function SolidFormatPrice(props: {
|
|
|
434
499
|
places_after_comma_: number | "auto";
|
|
435
500
|
};
|
|
436
501
|
}): JSX.Element;
|
|
437
|
-
type DisplayTransformerAlwaysThereData = {
|
|
438
|
-
merchant: string;
|
|
439
|
-
market: string;
|
|
440
|
-
locale: string;
|
|
441
|
-
};
|
|
442
|
-
type CanBePromiseWrapped<T> = T | Promise<T>;
|
|
443
|
-
export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
|
|
444
|
-
page_url: string;
|
|
445
|
-
})[] : T[K] };
|
|
446
|
-
/**
|
|
447
|
-
* A ProductListing with ancestors added in, this is what we pass to the display transformers as the ancestors might be required to construct the URL
|
|
448
|
-
*/
|
|
449
|
-
type ProductListingWithAncestors = ProductListing & {
|
|
450
|
-
ancestors: Ancestors;
|
|
451
|
-
};
|
|
452
|
-
/**
|
|
453
|
-
* The displayTransformer for categories does not only get a list of ListingSuggestions, when a search query has listing suggestions, but also their ancestors since we show breadcrumbs for the listing suggestions. To let the user differentiate (since the suggestion ones can be added/removed but not the ancestors) we add a boolean is_suggestion to the listing suggestions passed to the displayTransformer.
|
|
454
|
-
*/
|
|
455
|
-
type ListingSuggestionForTransformer = (ListingSuggestion & {
|
|
456
|
-
is_suggestion: true;
|
|
457
|
-
}) | (Omit<ListingSuggestion, "suggestions_result_id"> & {
|
|
458
|
-
is_suggestion: false;
|
|
459
|
-
});
|
|
460
|
-
/**
|
|
461
|
-
* DisplayTransformers supersede pageURLCreator
|
|
462
|
-
* DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
|
|
463
|
-
*/
|
|
464
|
-
export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = {
|
|
465
|
-
products?: (options: DisplayTransformerAlwaysThereData & {
|
|
466
|
-
displays: InputDisplay[];
|
|
467
|
-
}) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
|
|
468
|
-
categories?: <T extends ProductListingWithAncestors | ListingSuggestionForTransformer>(options: DisplayTransformerAlwaysThereData & {
|
|
469
|
-
data: T[];
|
|
470
|
-
}) => CanBePromiseWrapped<(T & {
|
|
471
|
-
page_url: string;
|
|
472
|
-
})[]>;
|
|
473
|
-
contentResults?: (options: DisplayTransformerAlwaysThereData & {
|
|
474
|
-
data: ContentLink[];
|
|
475
|
-
}) => CanBePromiseWrapped<ContentLink[]>;
|
|
476
|
-
};
|
|
477
|
-
export type SomethingTakingADisplayTransformers<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
478
|
-
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
479
|
-
} : {
|
|
480
|
-
display_transformers: DisplayTransformers<InputDisplay, OutputDisplay>;
|
|
481
|
-
} : {
|
|
482
|
-
page_url_creator?: never;
|
|
483
|
-
display_transformers?: never;
|
|
484
|
-
};
|
|
485
502
|
type ListingSuggestionAfterURLCreator = { [K in keyof ListingSuggestion]: K extends "ancestors" ? (ListingSuggestion & {
|
|
486
503
|
page_url: string;
|
|
487
504
|
})[] : ListingSuggestion[K] } & {
|
|
@@ -1485,7 +1502,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
|
|
|
1485
1502
|
* Open the modal with support for alignment.
|
|
1486
1503
|
* @returns {void}
|
|
1487
1504
|
*/
|
|
1488
|
-
export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends
|
|
1505
|
+
export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
|
|
1489
1506
|
export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
|
|
1490
1507
|
export interface PageReplacer {
|
|
1491
1508
|
readonly render_: () => Node_Array;
|
|
@@ -1564,5 +1581,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
|
|
|
1564
1581
|
content_blocks_by_row?: ContentBlocksByRow;
|
|
1565
1582
|
layout?: PossibleLayout;
|
|
1566
1583
|
filterModalParent_?: HTMLElement | ShadowRoot;
|
|
1567
|
-
}): import("@depict-ai/utilishared
|
|
1584
|
+
}): import("@depict-ai/utilishared").Node_Array;
|
|
1568
1585
|
export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";
|