@depict-ai/ui 2.1.1 → 2.1.2

package/server/latest/index.d.ts

@@ -6,8 +6,8 @@ import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/ap
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
-import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.1.1";
+import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
+export const version = "2.1.2";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -55,7 +55,7 @@ export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlac
  * The interface for a content block.
  * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
  * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
- * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so (see `ImagePlaceholder`), to avoid layout shifts and ensure scroll restoration works correctly.
  *
  * - `span_columns`: How many columns the block should span. This will be capped to the number of columns available.
  * - `span_rows`: How many rows the block should span.
@@ -670,7 +670,7 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
-  list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
+  list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
   get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{

package/server/latest/index.js

@@ -6,7 +6,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 = "2.1.1";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.2";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -3691,8 +3691,7 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
   query_base_: query_base_,
   depict_api_: depict_api_,
   is_loading_: is_loading_,
-  content_blocks_: content_blocks_,
-  set_number_loaded_displays_: set_number_loaded_displays_
+  content_blocks_: content_blocks_
 }) {
   // The following sets up an intersection observer to determine which results are in the viewport, used for the ScrollStatus indicator and knowing when to load more
   const target_to_index_map = new Map();
@@ -3736,7 +3735,6 @@ function $0449e7d49398c077$export$a1fd619a4743ca08({
     query_base_: query_base_,
     depict_api_: depict_api_
   });
-  $i7OB2$createComputed(() => set_number_loaded_displays_(displays_by_key_().size));
   return $29ec7cddbe1d3484$export$43f0fb951fcb0c54({
     displays_by_key_: displays_by_key_,
     merchant_: merchant_,
@@ -3919,26 +3917,18 @@ const $e7a7eb102ddc0c79$var$_tmpl$ = ["<div", ' class="content-block-wrapper" st
 function $e7a7eb102ddc0c79$export$791ef57e62e21c3f({
   content_blocks_: incoming_content_blocks,
   cols_at_size_: cols_at_size_,
-  number_of_items_shown_: number_of_items_shown_,
   set_top_row_shortened_by_: set_top_row_shortened_by_
 }) {
   // these are by row
   const [content_blocks, set_content_blocks] = $i7OB2$createStore([]);
   const n_cols_currently_showing_ = $bed740eef1769419$export$a79e666719b3647c(cols_at_size_);
-  const products_to_rows = products => {
-    const cols_currently_showing = n_cols_currently_showing_();
-    if (cols_currently_showing === null) return 0;
-    return Math.ceil(products / cols_currently_showing);
-  };
-  const showing_rows = $i7OB2$createMemo(() => products_to_rows(number_of_items_shown_()));
   $i7OB2$createEffect(() => {
     const incoming_value = incoming_content_blocks();
     if (!incoming_value) {
       set_content_blocks([]);
       return;
     }
-    const capped_value = incoming_value.slice(0, showing_rows()); // Don't show more content blocks than we have rows
-    set_content_blocks($i7OB2$reconcile(capped_value, {
+    set_content_blocks($i7OB2$reconcile(incoming_value, {
       key: "content"
     })); // key: Make moving blocks faster, see https://github.com/solidjs/solid/issues/1925#issuecomment-1769671596
   });
@@ -3995,12 +3985,12 @@ function $e7a7eb102ddc0c79$var$remap_blocks_to_index({
       for (let j = 0; j < i; j++) {
         const row = displaced_products[j];
         if (row === undefined) continue; // there were no blocks in this row
-        let items_in_row;
-        if (typeof row === "number") items_in_row = row;else {
-          items_in_row = row.filter(item => item).length;
-          displaced_products[j] = items_in_row;
+        let displaced_items_in_row;
+        if (typeof row === "number") displaced_items_in_row = row;else {
+          displaced_items_in_row = row.filter(item => item).length;
+          displaced_products[j] = displaced_items_in_row;
         }
-        displacement_by_added_blocks += items_in_row;
+        displacement_by_added_blocks += displaced_items_in_row;
       }
       const index_of_us_in_row = target_index - index_of_first_item_in_row;
       for (let j = 0; j < index_of_us_in_row; j++) if (displaced_products[i]?.[j])
@@ -4038,13 +4028,27 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
   const get_wrapped_blocks = $i7OB2$mapArray(() => rendered_content_blocks, block => {
     if (!block) return;
     const get_span_columns = () => Math.min(block.span_columns, max_span_columns() ?? Infinity);
+    const [rendering_delayed, set_rendering_delayed_] = $i7OB2$createSignal(true);
+    const content = $i7OB2$createComponent((0, $i7OB2$Show), {
+      get when() {
+        return !rendering_delayed();
+      },
+      get children() {
+        return $i7OB2$ssr($e7a7eb102ddc0c79$var$_tmpl$, $i7OB2$ssrHydrationKey(), "grid-column:" + `span ${$i7OB2$escape(get_span_columns(), true)}` + (";grid-row:" + `span ${$i7OB2$escape(block.span_rows, true)}`) + (";spans_columns_variable_name:" + $i7OB2$escape(get_span_columns(), true)), $i7OB2$escape($i7OB2$createComponent($e7a7eb102ddc0c79$var$RenderContent, {
+          get content() {
+            return block.content;
+          }
+        })));
+      }
+    });
     return $i7OB2$mergeProps1(block, {
       // Create content divs for the blocks with as much fine-grained diffing as possible?
-      content: $i7OB2$ssr($e7a7eb102ddc0c79$var$_tmpl$, $i7OB2$ssrHydrationKey(), "grid-column:" + `span ${$i7OB2$escape(get_span_columns(), true)}` + (";grid-row:" + `span ${$i7OB2$escape(block.span_rows, true)}`) + (";spans_columns_variable_name:" + $i7OB2$escape(get_span_columns(), true)), $i7OB2$escape($i7OB2$createComponent($e7a7eb102ddc0c79$var$RenderContent, {
-        get content() {
-          return block.content;
-        }
-      }))),
+      content: () => {
+        // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
+        // However, no need to count products to know if we should render: the <For> loops in Placeholders and render_displays will only call this function if there's actually a product here that wants to display this block
+        set_rendering_delayed_(false);
+        return content;
+      },
       get span_columns() {
         // Cap max width of block to the number of columns available, for everyone downstream
         return get_span_columns();
@@ -4132,8 +4136,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
           let fallback_is_alive = false;
           const [get_should_have_placeholders_rendered, set_should_have_placeholders_rendered] = $i7OB2$createSignal(true);
           const [top_row_shortened_by_, set_top_row_shortened_by_] = $i7OB2$createSignal(0);
-          const [product_card_suspense_is_in_fallback, set_product_card_suspense_is_in_fallback] = $i7OB2$createSignal(false);
-          const [number_loaded_displays, set_number_loaded_displays_] = $i7OB2$createSignal(0);
+          $i7OB2$createSignal(false);
           const modified_cols_at_size = $15aa76e6da02e5c2$export$cb5808ba002cdeed({
             layout_options_: layout_options_,
             sort_or_filter_open_: sort_or_filter_open_
@@ -4144,12 +4147,10 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
               for_id: for_id
             }) => for_id === id_currently_querying_for_())?.min_results_loaded ?? min_products_to_fetch_);
           });
-          const number_of_items_shown_ = $i7OB2$createMemo(() => is_loading_() || product_card_suspense_is_in_fallback() ? num_placeholders_() : number_loaded_displays());
           const doesnt_have_content_blocks = $i7OB2$createMemo(() => !content_blocks_by_row_());
           const content_blocks_ = $i7OB2$createMemo(() => doesnt_have_content_blocks() ? () => [] : $e7a7eb102ddc0c79$export$791ef57e62e21c3f({
             content_blocks_: content_blocks_by_row_,
             cols_at_size_: modified_cols_at_size,
-            number_of_items_shown_: number_of_items_shown_,
             set_top_row_shortened_by_: set_top_row_shortened_by_
           }));
           const rendered_placeholders = $i7OB2$createMemo(() => get_should_have_placeholders_rendered() ? $6e41f1fde994db72$export$f33414a4df0afd3f({
@@ -4189,8 +4190,6 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
             get fallback() {
               fallback_is_alive = true;
               $i7OB2$onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-              set_product_card_suspense_is_in_fallback(true); // Here for the content block code that needs to know how many items we're displaying
-              $i7OB2$onCleanup(() => set_product_card_suspense_is_in_fallback(false));
               return $i7OB2$createMemo(() => {
                 // We need to be able to block the suspense since when async product cards are *rendering* we want to show the placeholders on initial load but not when loading more
                 // In future we could have individual suspense's for each product card, but that's too much for now
@@ -4215,8 +4214,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                   query_base_: query_base_,
                   depict_api_: depict_api_,
                   is_loading_: is_loading_,
-                  content_blocks_: content_blocks_,
-                  set_number_loaded_displays_: set_number_loaded_displays_
+                  content_blocks_: content_blocks_
                 });
                 $i7OB2$onCleanup(() => suspense_contents = undefined);
                 return suspense_contents;