@depict-ai/ui 2.0.8 → 2.0.9

package/latest/index.cjs

@@ -61,7 +61,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.8";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.9";
 
 /** @jsxImportSource solid-js */
 
@@ -238,6 +238,7 @@ function $a73063cc642f3e5f$export$7f8bd308237ab5a5(get_displays_) {
   });
   return displays_by_key_;
 }
+const $a73063cc642f3e5f$var$result_ids = ["search_result_id", "product_listing_result_id", "recommendation_id"];
 function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
   displays_by_key_: displays_by_key_,
   merchant_: merchant_,
@@ -251,17 +252,24 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     },
     children: (product_id, index) => {
       const owner = $gVhhF$solidjs.getOwner();
-      const display_accessor = $gVhhF$solidjs.createMemo(() => displays_by_key_().get(product_id));
-      const [product_card_resource] = $gVhhF$solidjs.createResource(display_accessor,
-      // re-render when the reference to the display object changes
-      // this should only be the case when the merchant or market changes and the new request has completed
-      display => {
+      const display_accessor = $gVhhF$solidjs.createMemo(prev => {
+        const new_display = displays_by_key_().get(product_id);
+        if (prev && $a73063cc642f3e5f$var$deep_equal(prev, new_display))
+          // If displays are identical, they haven't changed due to merchant/market changing OR we made a new query and the displays are the same. Return the old display (same object reference) to avoid re-rendering.
+          // This doesn't work if people mutate the displays from within the template but we hope they don't
+          // (We can't know if the display changing is due to merchant/market changing or a new query otherwise and don't want to run into https://gitlab.com/depict-ai/depict.ai/-/merge_requests/6890/diffs)
+          return prev;
+        return new_display;
+      });
+      const [product_card_resource] = $gVhhF$solidjs.createResource(() => [merchant_(), market_(), display_accessor()],
+      // re-render when the reference to the display object changes or the merchant or market changes
+      // (We don't want to re-render if nothing has changed)
+      ([merchant, market, display]) => {
         // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
         return product_card_template_(display, {
           set_on_index_change: fn => $gVhhF$solidjs.runWithOwner(owner, () => $gVhhF$solidjs.createEffect(() => fn(index()))),
-          merchant: $gVhhF$solidjs.untrack(merchant_),
-          // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
-          market: $gVhhF$solidjs.untrack(market_) // recommendation_grid can provide a sneaky undefined here just FYI
+          merchant: merchant,
+          market: market // recommendation_grid can provide a sneaky undefined here just FYI
         });
       });
 
@@ -276,15 +284,13 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
           elements.push(element);
           // Add tracking ids
           if (!(element instanceof HTMLElement)) continue; // Apparently only HTMLElements have dataset
-          const {
-            dataset: dataset
-          } = element;
-          const {
-            search_result_id: search_result_id,
-            product_listing_result_id: product_listing_result_id,
-            recommendation_id: recommendation_id
-          } = display;
-          if (search_result_id) dataset.searchResultId = search_result_id;else if (product_listing_result_id) dataset.productListingResultId = product_listing_result_id;else if (recommendation_id) dataset.recommendationId = recommendation_id;
+          for (let i = 0; i < $a73063cc642f3e5f$var$result_ids.length; i++) {
+            const id = $a73063cc642f3e5f$var$result_ids[i];
+            const value = display[id];
+            if (value) Object.assign(element.dataset, $gVhhF$depictaiutilishared.camelCasifyObject({
+              [id]: value
+            }));
+          }
         }
         do_per_elements_?.(elements, index);
       });
@@ -292,6 +298,23 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({
     }
   });
 }
+// Source: https://dmitripavlutin.com/how-to-compare-objects-in-javascript/
+function $a73063cc642f3e5f$var$deep_equal(object1, object2) {
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) return false;
+  for (const key of keys1) {
+    if ($a73063cc642f3e5f$var$result_ids.includes(key)) continue; // ignore result ids that change per response
+    const val1 = object1[key];
+    const val2 = object2[key];
+    const areObjects = $a73063cc642f3e5f$var$is_object(val1) && $a73063cc642f3e5f$var$is_object(val2);
+    if (areObjects && !$a73063cc642f3e5f$var$deep_equal(val1, val2) || !areObjects && val1 !== val2) return false;
+  }
+  return true;
+}
+function $a73063cc642f3e5f$var$is_object(object) {
+  return object != null && typeof object === "object";
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}
@@ -654,51 +677,52 @@ function $b8e79813f4f7ebe4$export$7da560f849543dff({
 }) {
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
+  const elements = (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
+      _el$4 = _el$3.nextSibling,
+      [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
+    $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$3, _co$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
+      get rows() {
+        return rows_object_();
+      },
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+          get fallback() {
+            return $0caf87eaa19079da$export$f33414a4df0afd3f({
+              num_placeholders_: num_placeholders_,
+              product_card_template_: product_card_template_
+            });
+          },
+          get children() {
+            return (() => {
+              // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+              const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
+              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                merchant_: merchant_,
+                market_: market_,
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$5, _co$2);
+    return _el$;
+  })();
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
       return is_showing_something();
     },
-    get children() {
-      const _el$ = $gVhhF$solidjsweb.getNextElement($b8e79813f4f7ebe4$var$_tmpl$),
-        _el$2 = _el$.firstChild,
-        [_el$3, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$2.nextSibling),
-        _el$4 = _el$3.nextSibling,
-        [_el$5, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$4.nextSibling);
-      $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$3, _co$);
-      $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
-        get rows() {
-          return rows_object_();
-        },
-        layout: "grid",
-        element_attributes: {
-          class: "cards"
-        }
-      }, layout_options_, {
-        get children() {
-          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-            get fallback() {
-              return $0caf87eaa19079da$export$f33414a4df0afd3f({
-                num_placeholders_: num_placeholders_,
-                product_card_template_: product_card_template_
-              });
-            },
-            get children() {
-              return (() => {
-                // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-                const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource_() || []));
-                return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-                  displays_by_key_: displays_by_key_,
-                  merchant_: merchant_,
-                  market_: market_,
-                  product_card_template_: product_card_template_
-                });
-              })();
-            }
-          });
-        }
-      })), _el$5, _co$2);
-      return _el$;
-    }
+    children: elements
   });
 }
 const $1f8dbf7e28b3eff2$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="show-more major" type="button"></button>`, 2),
@@ -4304,7 +4328,7 @@ function $ac167f6af6a48fc3$export$a1fd619a4743ca08({
   const [get_extra_displays, set_extra_displays_] = $gVhhF$solidjs.createSignal([], {
     equals: false
   });
-  const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => [...plp_results_().displays, ...get_extra_displays()]));
+  const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => [...(plp_results_()?.displays || []), ...get_extra_displays()]));
   const percentage_in_view_ = $4117463e2939f5f4$export$63dd0350f8559dda({
     get_last_result_in_viewport_: get_last_result_in_viewport_,
     displays_by_key_: displays_by_key_,
@@ -4423,18 +4447,18 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
               layout_options_: layout_options_,
               sort_or_filter_open_: sort_or_filter_open_
             });
-            $gVhhF$solidjs.createComputed(() => {
-              if (!is_loading_()) return;
-              set_should_have_placeholders_rendered(true);
-              set_suspense_is_blocked(false);
-              is_just_after_plp_results_update = true;
-            });
             const block_suspense_if_needed = () => {
               if (!is_just_after_plp_results_update) return;
               is_just_after_plp_results_update = false;
               fallback_is_alive = false;
               set_suspense_is_blocked(true);
             };
+            $gVhhF$solidjs.createComputed(() => {
+              if (!is_loading_()) return;
+              set_should_have_placeholders_rendered(true);
+              set_suspense_is_blocked(false);
+              is_just_after_plp_results_update = true;
+            });
             $gVhhF$solidjs.createEffect($gVhhF$solidjs.on(plp_results_, () => {
               if (!fallback_is_alive) {
                 // if all product card rendering functions after the initial rendering are synchronous the suspense boundary will never go into the fallback, so we don't know when they have finished rendering, and we can't block the suspense. Therefore, we're just doing it with this effect
@@ -4444,6 +4468,48 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
             }, {
               defer: true
             }));
+            /*
+            This suspense ensures that if someone has async templates, we still show placeholders until the product cards actually have finished rendering (automagically since they're createResource's)
+            We're creating it outside the <Show> so that we can benefit from <For>'s optimisation between changing results
+            (For the whole idea of the displays being cached to work we can't tear down and re-run ProductCards for every new result.
+            We have to keep ProductCards alive, but hidden, and feed them new data as soon as we had it)
+            */
+            const product_cards_when_data = $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+              get fallback() {
+                return (() => {
+                  fallback_is_alive = true;
+                  $gVhhF$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
+                  return $gVhhF$solidjs.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
+                    if (get_suspense_is_blocked()) return suspense_contents;
+                    set_should_have_placeholders_rendered(true); // just in case
+                    $gVhhF$solidjs.onCleanup(() => set_should_have_placeholders_rendered(false));
+                    return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
+                  });
+                })();
+              },
+
+              get children() {
+                return (() => {
+                  suspense_contents = $ac167f6af6a48fc3$export$a1fd619a4743ca08({
+                    product_card_template_: product_card_template_,
+                    plp_results_: plp_results_,
+                    last_result_in_viewport_: last_result_in_viewport_,
+                    first_result_in_viewport_: first_result_in_viewport_,
+                    market_: market_,
+                    merchant_: merchant_,
+                    all_products_loaded_: all_products_loaded_,
+                    min_products_to_fetch_: min_products_to_fetch_,
+                    query_base_: query_base_,
+                    depict_api_: depict_api_,
+                    is_loading_: is_loading_
+                  });
+                  $gVhhF$solidjs.onCleanup(() => suspense_contents = undefined);
+                  return suspense_contents;
+                })();
+              }
+            });
             return [$gVhhF$solidjsweb.memo((0, $fc23d7668ae0011d$export$a2cc176055f8f08)), $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), {
               get cols_at_size() {
                 return modified_cols_at_size();
@@ -4467,44 +4533,7 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({
                   get fallback() {
                     return rendered_placeholders();
                   },
-                  get children() {
-                    return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-                      get fallback() {
-                        return (() => {
-                          fallback_is_alive = true;
-                          $gVhhF$solidjs.onCleanup(block_suspense_if_needed); // Block suspense after initial run every time after we fetch
-                          return $gVhhF$solidjs.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
-                            if (get_suspense_is_blocked()) return suspense_contents;
-                            set_should_have_placeholders_rendered(true); // just in case
-                            $gVhhF$solidjs.onCleanup(() => set_should_have_placeholders_rendered(false));
-                            return rendered_placeholders; // I lifted the placeholders into the memo since we don't want to re-render them when switching from <Show> to <Suspense>
-                          });
-                        })();
-                      },
-
-                      get children() {
-                        return (() => {
-                          suspense_contents = $ac167f6af6a48fc3$export$a1fd619a4743ca08({
-                            product_card_template_: product_card_template_,
-                            plp_results_: plp_results_,
-                            last_result_in_viewport_: last_result_in_viewport_,
-                            first_result_in_viewport_: first_result_in_viewport_,
-                            market_: market_,
-                            merchant_: merchant_,
-                            all_products_loaded_: all_products_loaded_,
-                            min_products_to_fetch_: min_products_to_fetch_,
-                            query_base_: query_base_,
-                            depict_api_: depict_api_,
-                            is_loading_: is_loading_
-                          });
-                          $gVhhF$solidjs.onCleanup(() => suspense_contents = undefined);
-                          return suspense_contents;
-                        })();
-                      }
-                    });
-                  }
+                  children: product_cards_when_data
                 });
               }
             })];
@@ -7513,58 +7542,61 @@ function $fb29c6201c369e39$export$7de92c4c2205ebf3({
   product_card_template_: product_card_template_,
   showing_recommendation_rows_: showing_recommendation_rows_,
   view_more_button_ = true,
-  layout_options_: layout_options_
+  layout_options_: layout_options_,
+  all_products_loaded_: all_products_loaded_
 }) {
   const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
   const rows_object = view_more_button_ ? $fb29c6201c369e39$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
   const [recommendations_resource] = $gVhhF$solidjs.createResource(search_query_base_, query => depict_api_.get_recommended(query).then(r => r.displays));
   const is_showing_something = $gVhhF$solidjs.createMemo(() => recommendations_resource.loading || recommendations_resource()?.length);
   const num_placeholders_ = $gVhhF$solidjs.createMemo(() => (0, $aec24316ed262dc0$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(([per_column]) => per_column)));
+  // Don't tear down elements every time one updates the page - don't put them within <Show>
+  const elements = (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($fb29c6201c369e39$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
+    $gVhhF$solidjsweb.insert(_el$2, () => i18n_.search_recs_title_());
+    $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
+      rows: rows_object,
+      layout: "grid",
+      element_attributes: {
+        class: "cards"
+      }
+    }, layout_options_, {
+      get children() {
+        return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
+          get fallback() {
+            return $0caf87eaa19079da$export$f33414a4df0afd3f({
+              num_placeholders_: num_placeholders_,
+              product_card_template_: product_card_template_
+            });
+          },
+          get children() {
+            return (() => {
+              // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
+              const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource() || []));
+              return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
+                displays_by_key_: displays_by_key_,
+                merchant_: $gVhhF$solidjs.createMemo(() => search_query_base_().tenant),
+                market_: $gVhhF$solidjs.createMemo(() => search_query_base_().market),
+                product_card_template_: product_card_template_
+              });
+            })();
+          }
+        });
+      }
+    })), _el$6, _co$2);
+    return _el$;
+  })();
   return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
     get when() {
-      return is_showing_something();
+      return $gVhhF$solidjsweb.memo(() => !!is_showing_something())() && all_products_loaded_();
     },
-    get children() {
-      const _el$ = $gVhhF$solidjsweb.getNextElement($fb29c6201c369e39$var$_tmpl$),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.nextSibling,
-        [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
-        _el$5 = _el$4.nextSibling,
-        [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
-      $gVhhF$solidjsweb.insert(_el$2, () => i18n_.search_recs_title_());
-      $gVhhF$solidjsweb.insert(_el$, (0, $fc23d7668ae0011d$export$a2cc176055f8f08), _el$4, _co$);
-      $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $f48d0fbb00835aaa$export$d21e32dfedac04be), $gVhhF$solidjsweb.mergeProps({
-        rows: rows_object,
-        layout: "grid",
-        element_attributes: {
-          class: "cards"
-        }
-      }, layout_options_, {
-        get children() {
-          return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Suspense), {
-            get fallback() {
-              return $0caf87eaa19079da$export$f33414a4df0afd3f({
-                num_placeholders_: num_placeholders_,
-                product_card_template_: product_card_template_
-              });
-            },
-            get children() {
-              return (() => {
-                // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-                const displays_by_key_ = $a73063cc642f3e5f$export$7f8bd308237ab5a5($gVhhF$solidjs.createMemo(() => recommendations_resource() || []));
-                return $a73063cc642f3e5f$export$43f0fb951fcb0c54({
-                  displays_by_key_: displays_by_key_,
-                  merchant_: $gVhhF$solidjs.createMemo(() => search_query_base_().tenant),
-                  market_: $gVhhF$solidjs.createMemo(() => search_query_base_().market),
-                  product_card_template_: product_card_template_
-                });
-              })();
-            }
-          });
-        }
-      })), _el$6, _co$2);
-      return _el$;
-    }
+    children: elements
   });
 }
 function $fb29c6201c369e39$var$make_state_saved_rows([get_showing_recommendation_rows, set_showing_recommendation_rows], i18n_) {
@@ -9999,9 +10031,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       }
     }), _el$19, _co$8);
     $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-      get when() {
-        return get_all_products_loaded() && !disable_search_recommendations_;
-      },
+      when: !disable_search_recommendations_,
       keyed: false,
       get children() {
         return $gVhhF$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
@@ -10017,7 +10047,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
               },
               showing_recommendation_rows_: showing_recommendation_rows_,
               view_more_button_: search_recs_view_more_,
-              product_card_template_: product_card_template_
+              product_card_template_: product_card_template_,
+              all_products_loaded_: get_all_products_loaded
             });
           }
         });

package/latest/index.d.ts

@@ -7,7 +7,7 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "2.0.8";
+export const version = "2.0.9";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */