@depict-ai/react-ui 1.3.10 → 1.5.1

package/dist/module.js

@@ -1,7 +1,7 @@
 import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, queueMacroTask as $TZSbU$queueMacroTask, instant_exec_on_suspect_history_change as $TZSbU$instant_exec_on_suspect_history_change, derror as $TZSbU$derror} from "@depict-ai/utilishared";
-import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictAPI as $TZSbU$DepictAPI, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, ProductCardError as $TZSbU$ProductCardError, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, defaultColsAtSize as $TZSbU$defaultColsAtSize, defaultGridSpacing as $TZSbU$defaultGridSpacing, CategoryPage as $TZSbU$CategoryPage, defaultCategoryTitlePlugin as $TZSbU$defaultCategoryTitlePlugin, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, ImagePlaceholder as $TZSbU$ImagePlaceholder, TextPlaceholder as $TZSbU$TextPlaceholder, open_modal_with_alignment as $TZSbU$open_modal_with_alignment, SearchField as $TZSbU$SearchField, fetchDepictRecommendations as $TZSbU$fetchDepictRecommendations} from "@depict-ai/ui";
-import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createEffect as $TZSbU$createEffect, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, getOwner as $TZSbU$getOwner, runWithOwner as $TZSbU$runWithOwner, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed} from "solid-js";
-import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, Component as $TZSbU$Component, forwardRef as $TZSbU$forwardRef, useCallback as $TZSbU$useCallback} from "react";
+import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictAPI as $TZSbU$DepictAPI, ProductCardError as $TZSbU$ProductCardError, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, defaultColsAtSize as $TZSbU$defaultColsAtSize, defaultGridSpacing as $TZSbU$defaultGridSpacing, CategoryPage as $TZSbU$CategoryPage, defaultCategoryTitlePlugin as $TZSbU$defaultCategoryTitlePlugin, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, ImagePlaceholder as $TZSbU$ImagePlaceholder, TextPlaceholder as $TZSbU$TextPlaceholder, open_modal_with_alignment as $TZSbU$open_modal_with_alignment, SearchField as $TZSbU$SearchField, fetchDepictRecommendations as $TZSbU$fetchDepictRecommendations} from "@depict-ai/ui";
+import {untrack as $TZSbU$untrack, createRoot as $TZSbU$createRoot, createEffect as $TZSbU$createEffect, createMemo as $TZSbU$createMemo, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, getOwner as $TZSbU$getOwner, runWithOwner as $TZSbU$runWithOwner, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed} from "solid-js";
+import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useEffect as $TZSbU$useEffect, useState as $TZSbU$useState, useRef as $TZSbU$useRef, Component as $TZSbU$Component, forwardRef as $TZSbU$forwardRef, useCallback as $TZSbU$useCallback} from "react";
 import {defaultLocale as $TZSbU$defaultLocale} from "@depict-ai/ui/locales";
 import {render as $TZSbU$render, hydrate as $TZSbU$hydrate} from "solid-js/web";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
@@ -11,7 +11,8 @@ import {DPC as $TZSbU$DPC} from "@depict-ai/dpc";
 
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.3.10";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.5.1";
+
 
 
 
@@ -23,18 +24,17 @@ const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.3.10";
 
 
 const $42858f023ef23dab$export$8e769ad4338a911e = {
-    search: null,
-    category: null,
+    usedLocale: (0, $TZSbU$createSignal)((0, $TZSbU$defaultLocale)),
+    search_instances: new Map(),
+    category_instances: new Map(),
     api: null,
     dpc: null,
-    merchant: null,
-    market: null,
-    userId: undefined,
-    sessionId: undefined,
-    metaData: undefined,
+    merchant: (0, $TZSbU$createSignal)(),
+    market: (0, $TZSbU$createSignal)(),
+    userId: (0, $TZSbU$createSignal)(),
+    sessionId: (0, $TZSbU$createSignal)(),
     known_category_paths: new Set(),
     search_page_path_: (0, $TZSbU$createSignal)(),
-    required_state_set_: (0, $TZSbU$createSignal)(false),
     search_page_in_dom: (0, $TZSbU$createSignal)(false),
     category_page_in_dom: (0, $TZSbU$createSignal)(false)
 };
@@ -112,12 +112,13 @@ function $c83ba9ab79386687$export$f6e64e17bd69eeef({ solid_component: solid_comp
         } : {}
     }), ...portals);
 }
-function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set = (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[0]) {
+function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set) {
     return (...args)=>{
+        const default_is_set = (0, $TZSbU$createMemo)(()=>!!((0, $42858f023ef23dab$export$8e769ad4338a911e).merchant[0]() && (0, $42858f023ef23dab$export$8e769ad4338a911e).market[0]())); // Apparently Show re-renders kids otherwise even if the falsiness of the condition doesn't change
         // @ts-ignore
         return (0, $TZSbU$createComponent)((0, $TZSbU$Show), {
             get when () {
-                return is_set();
+                return (is_set || default_is_set)();
             },
             get children () {
                 return component(...args);
@@ -154,9 +155,10 @@ async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , co
         was_cleaned_up = true;
         // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
         component_portals.delete(portal);
-        set_portals([
-            ...component_portals
-        ]);
+        // Updating i.e. the merchant will cause a setState call while rendering the DepictProvider component which is illegal because it usually infinite loops react apps. In our case it doesn't though, so we just evade detection by doing it a microtask later. See also https://github.com/facebook/react/issues/18178#issuecomment-595846312
+        queueMicrotask(()=>set_portals([
+                ...component_portals
+            ]));
     });
     await react_has_ran_hooks; // After react has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
     return [
@@ -300,23 +302,102 @@ const $a00d8f27abd5d0b0$export$47e064413edabf36 = (merchant, market, userId, ses
 };
 
 
+
+
+
+function $80202ccbe2ade418$export$bae2769a30719c48(disposable, stateKey) {
+    const actual_function = (dispose)=>{
+        const { usedLocale: [get_locale] , merchant: [get_merchant] , market: [get_market] , search_query_url_param_name: search_query_url_param_name , search_page_path_: [get_search_page_path]  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
+        const instance = new (0, $TZSbU$DepictSearch)({
+            api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
+            search_query_url_param_name: search_query_url_param_name,
+            market: (0, $TZSbU$untrack)(get_market),
+            // TODO: check if we can do this
+            merchant: (0, $TZSbU$untrack)(get_merchant),
+            enable_category_suggestions: (0, $42858f023ef23dab$export$8e769ad4338a911e).enableCategorySuggestions ?? false,
+            // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
+            localization: (0, $TZSbU$untrack)(get_locale),
+            url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path),
+            on_navigation: (0, $42858f023ef23dab$export$8e769ad4338a911e).on_navigation,
+            unique_instance_key_for_state: stateKey
+        });
+        (0, $TZSbU$createComputed)(()=>{
+            const new_merchant = get_merchant();
+            if (new_merchant) instance.merchant = new_merchant;
+        });
+        (0, $TZSbU$createComputed)(()=>{
+            const new_market = get_market();
+            if (new_market) instance.market = new_market;
+        });
+        (0, $TZSbU$createComputed)(()=>instance.localization = get_locale());
+        return {
+            instance: instance,
+            dispose: dispose,
+            users: 0
+        };
+    };
+    const function_length_0 = ()=>actual_function();
+    const function_length_1 = (dispose)=>actual_function(dispose);
+    return (0, $TZSbU$createRoot)(disposable ? function_length_1 : function_length_0); // solid-js creates roots differently based on if it can detect a dispose argument, with function.length. That's why this is written like this
+}
+
+
+
+
+
+function $9145bcf81a0216ce$export$248b95d5073d5bab(disposable, stateKey) {
+    const actual_function = (dispose)=>{
+        const { usedLocale: [get_locale] , merchant: [get_merchant] , market: [get_market]  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
+        const instance = new (0, $TZSbU$DepictCategory)({
+            api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
+            market: (0, $TZSbU$untrack)(get_market),
+            // TODO: check if we can do this
+            merchant: (0, $TZSbU$untrack)(get_merchant),
+            localization: (0, $TZSbU$untrack)(get_locale),
+            on_navigation: (0, $42858f023ef23dab$export$8e769ad4338a911e).on_navigation,
+            unique_instance_key_for_state: stateKey
+        });
+        (0, $TZSbU$createComputed)(()=>{
+            const new_merchant = get_merchant();
+            if (new_merchant) instance.merchant = new_merchant;
+        });
+        (0, $TZSbU$createComputed)(()=>{
+            const new_market = get_market();
+            if (new_market) instance.market = new_market;
+        });
+        (0, $TZSbU$createComputed)(()=>instance.localization = get_locale());
+        return {
+            instance: instance,
+            dispose: dispose,
+            users: 0
+        };
+    };
+    const function_length_0 = ()=>actual_function();
+    const function_length_1 = (dispose)=>actual_function(dispose);
+    return (0, $TZSbU$createRoot)(disposable ? function_length_1 : function_length_0); // solid-js creates roots differently based on if it can detect a dispose argument, with function.length. That's why this is written like this
+}
+
+
+let $5376eb2a386cd90d$var$provider_instances = 0;
 function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale , metaData: metaData , userId: userId , sessionId: sessionId  } = props;
     const usedLocale = locale ?? (0, $TZSbU$defaultLocale);
     const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
+    $5376eb2a386cd90d$var$multiple_depictprovider_guard();
     // Will run on other prop changes, but harmless
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).userId = userId;
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId = sessionId;
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).userId[1](userId);
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId[1](sessionId);
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).usedLocale[1](usedLocale);
     (0, $42858f023ef23dab$export$8e769ad4338a911e).metaData = metaData;
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).market = market;
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).merchant = merchant;
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).search_query_url_param_name = urlParamName;
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).enableCategorySuggestions = enableCategorySuggestions;
     (0, $a00d8f27abd5d0b0$export$47e064413edabf36)(merchant, market, userId, sessionId);
-    if (!market || !merchant) {
-        (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](false);
-        return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
-    }
+    if (!market || !merchant) return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).market[1](market);
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).merchant[1](merchant);
+    (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)();
     try {
-        const { search: search , category: category , api: api , search_page_path_: [get_search_page_path, set_search_page_path]  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
+        const { search_instances: search_instances , category_instances: category_instances , api: api , search_page_path_: [, set_search_page_path]  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
         if (typeof window?.next?.router === "undefined" && !navigateFunction) throw new Error("You must provide a navigateFunction when not using Next.js.");
         const on_navigation = ({ is_replace: is_replace , new_url: new_url , scroll: scroll  })=>{
             const new_relative_url = new_url.origin === location.origin ? new_url.pathname + new_url.search + new_url.hash : new_url.href; // bail out of making URL relative if it's not possible
@@ -326,45 +407,24 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
             });
             else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_relative_url, is_replace, scroll);
         };
+        (0, $42858f023ef23dab$export$8e769ad4338a911e).on_navigation = on_navigation;
         if (!api) (0, $42858f023ef23dab$export$8e769ad4338a911e).api = new (0, $TZSbU$DepictAPI)({
             get_metadata: async ()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).metaData,
-            get_user_id: ()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).userId,
-            get_session_id: ()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId
+            get_user_id: ()=>(0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).userId[0]),
+            get_session_id: ()=>(0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).sessionId[0])
         });
         (0, $42858f023ef23dab$export$8e769ad4338a911e).api.page_url_creator = props.pageURLCreator;
-        if (searchPagePath) {
-            set_search_page_path($5376eb2a386cd90d$var$ensure_correct_formatting(searchPagePath));
-            if (!search) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
-                    api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
-                    search_query_url_param_name: urlParamName,
-                    market: market,
-                    merchant: merchant,
-                    enable_category_suggestions: enableCategorySuggestions ?? false,
-                    // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
-                    localization: usedLocale,
-                    url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path),
-                    on_navigation: on_navigation
-                }));
-            else {
-                search.market = market;
-                search.merchant = merchant;
-                search.localization = usedLocale;
-            }
+        if (searchPagePath) set_search_page_path($5376eb2a386cd90d$var$ensure_correct_formatting(searchPagePath));
+        if (!search_instances.get(undefined)) {
+            // Create initial search instance which always exists. It i.e. gards against the state getting deleted from history.state by someone pushing to it with an empty object, which commonly people copy from code snippets.
+            // Also, it emulates the behavior pre-supporting multiple "depict blocks" on the same page
+            const instance = (0, $80202ccbe2ade418$export$bae2769a30719c48)(false);
+            search_instances.set(undefined, instance);
         }
-        if (!category) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).category = new (0, $TZSbU$DepictCategory)({
-                api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
-                market: market,
-                merchant: merchant,
-                localization: usedLocale,
-                on_navigation: on_navigation
-            }));
-        else {
-            category.market = market;
-            category.merchant = merchant;
-            category.localization = usedLocale;
+        if (!category_instances.get(undefined)) {
+            const instance = (0, $9145bcf81a0216ce$export$248b95d5073d5bab)(false);
+            category_instances.set(undefined, instance);
         }
-        (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)();
-        (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](true);
     } catch (e) {
         // Make sure to not break the users app if we throw
         queueMicrotask(()=>{
@@ -378,6 +438,15 @@ function $5376eb2a386cd90d$var$ensure_correct_formatting(path) {
     if (!path.startsWith("/")) return "/" + path;
     return path;
 }
+function $5376eb2a386cd90d$var$multiple_depictprovider_guard() {
+    (0, $TZSbU$useEffect)(()=>{
+        $5376eb2a386cd90d$var$provider_instances++;
+        if ($5376eb2a386cd90d$var$provider_instances > 1) throw new Error("You are using multiple DepictProviders. This is not supported and will lead to unexpected behavior. You can create multiple SearchPage and CategoryPage components, but only one DepictProvider.");
+        return ()=>{
+            $5376eb2a386cd90d$var$provider_instances--;
+        };
+    }, []);
+}
 
 
 
@@ -397,6 +466,32 @@ const $421f32789b6f111f$export$80e99ee6b29cadd2 = /*#__PURE__*/ (0, $TZSbU$forwa
 
 
 
+
+
+
+
+function $99489374cd4f601d$export$f4d89133c6985668(type, stateKey, componentName) {
+    const instances = (0, $42858f023ef23dab$export$8e769ad4338a911e)[type + "_instances"];
+    if (!instances.get(undefined)) throw Error(`${componentName}: State not set up. Did you forget to wrap your app in DepictProvider? Also make sure you've provided a merchant and a market.`);
+    let instance = instances.get(stateKey);
+    if (!instance) {
+        instance = type === "search" ? (0, $80202ccbe2ade418$export$bae2769a30719c48)(true, stateKey) : (0, $9145bcf81a0216ce$export$248b95d5073d5bab)(true, stateKey);
+        instances.set(stateKey, instance);
+    }
+    instance.users++;
+    (0, $TZSbU$onCleanup)(()=>{
+        instance.users--;
+        if (!instance.users && instance?.dispose) {
+            // main instance is not disposable, and shouldn't be deletable either
+            instance.dispose();
+            instances.delete(stateKey);
+        }
+    });
+    return instance.instance;
+}
+
+
+const $4a678f0c87b12e78$var$rendered_components_with_state_key = new Set();
 function $4a678f0c87b12e78$export$a54ec244c8863715(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
         solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($4a678f0c87b12e78$var$SolidSearchPage),
@@ -404,13 +499,29 @@ function $4a678f0c87b12e78$export$a54ec244c8863715(props) {
     });
 }
 function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
-    const depict_search = (0, $42858f023ef23dab$export$8e769ad4338a911e).search;
-    if (!depict_search) throw Error("No depict_search instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
-    const search_query_updating_blocked_signal = (0, $TZSbU$get_search_query_updating_blocked_signal)(depict_search);
-    if (!search_query_updating_blocked_signal) throw Error("No search_query_updating_blocked_signal when rendering SearchPage");
-    const [, set_search_query_updating_blocked_signal] = search_query_updating_blocked_signal;
+    const depict_search = (0, $TZSbU$createMemo)(()=>{
+        const instance = (0, $99489374cd4f601d$export$f4d89133c6985668)("search", props.stateKey, "SearchPage");
+        (0, $TZSbU$onCleanup)(()=>{
+            // Make sure we don't block the search query updating signal when we switch to a new provider instance
+            (0, $TZSbU$get_search_query_updating_blocked_signal)(instance)?.[1](false);
+        });
+        return instance;
+    });
     const update_updating_blocked_signal = ()=>{
-        set_search_query_updating_blocked_signal(!(0, $c83ba9ab79386687$export$775e6b3892b5ad52)(location));
+        // if search instances changes, also re-check for good measure (otherwise would have untrack around depict_search)
+        const signal = (0, $TZSbU$get_search_query_updating_blocked_signal)(depict_search());
+        if (!signal) throw Error("No search_query_updating_blocked_signal when rendering SearchPage");
+        const [, write_signal] = signal;
+        // This causes a bug. To reproduce:
+        // 1. Go to front page
+        // 2. Make a search
+        // 3. Press back button
+        // 4. Open search modal
+        // 5. Check the list of previous queries - the query just made isn't shown
+        // This is because on the front page the search_query updating is blocked because it's not the search page, and that means that `filtered_previous_searches` in Autocomplete.tsx doesn't filter out the current search query
+        // Because it's so minor and would be quite hard to fix (one would need a second "actual search query" signal just for this purpose) it's wontfix for now
+        // EDIT: now that we're resetting this in the onCleanup of the memo above this might no longer be the case
+        write_signal(!(0, $c83ba9ab79386687$export$775e6b3892b5ad52)(location));
     };
     const [, set_search_page_in_dom] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_in_dom;
     const component_portals = new Set();
@@ -424,24 +535,30 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
         update_updating_blocked_signal();
     });
     $4a678f0c87b12e78$var$search_page_path_checker();
-    return (0, $TZSbU$SearchPage)({
-        // Default config goes here
-        get include_input_field () {
-            return props.includeInputField;
-        },
-        get cols_at_size () {
-            return props.columnsAtSize ?? (0, $TZSbU$defaultColsAtSize);
-        },
-        get grid_spacing () {
-            return props.gridSpacing ?? (0, $TZSbU$defaultGridSpacing);
-        },
-        depict_search: depict_search,
-        product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
-                display: display,
-                react_template: (0, $TZSbU$untrack)(()=>props.productCard),
-                component_portals: component_portals,
-                set_portals: set_portals
-            })
+    return (0, $TZSbU$createMemo)(()=>{
+        const stateKey = (0, $TZSbU$untrack)(()=>props.stateKey);
+        if ($4a678f0c87b12e78$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple SearchPage components with the same stateKey: ${stateKey}. Each SearchPage component must have a unique stateKey.`);
+        $4a678f0c87b12e78$var$rendered_components_with_state_key.add(stateKey);
+        (0, $TZSbU$onCleanup)(()=>$4a678f0c87b12e78$var$rendered_components_with_state_key.delete(stateKey));
+        return (0, $TZSbU$SearchPage)({
+            // Default config goes here
+            get include_input_field () {
+                return props.includeInputField;
+            },
+            get cols_at_size () {
+                return props.columnsAtSize ?? (0, $TZSbU$defaultColsAtSize);
+            },
+            get grid_spacing () {
+                return props.gridSpacing ?? (0, $TZSbU$defaultGridSpacing);
+            },
+            depict_search: depict_search(),
+            product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
+                    display: display,
+                    react_template: (0, $TZSbU$untrack)(()=>props.productCard),
+                    component_portals: component_portals,
+                    set_portals: set_portals
+                })
+        });
     });
 }
 /**
@@ -465,6 +582,8 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
 
 
 
+
+const $48d7f568740a317d$var$rendered_components_with_state_key = new Set();
 function $48d7f568740a317d$export$f7d2f673fc2f091d(props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
         // @ts-ignore
@@ -475,8 +594,8 @@ function $48d7f568740a317d$export$f7d2f673fc2f091d(props) {
     });
 }
 function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
-    const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
-    if (!depict_category) throw Error("No depict_category instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
+    const depict_category = (0, $TZSbU$createMemo)(()=>(0, $99489374cd4f601d$export$f4d89133c6985668)("category", props.stateKey, "CategoryPage") // stateKey can change
+    );
     const [category_state_set, set_category_state_set] = (0, $TZSbU$createSignal)(false);
     const component_portals = new Set();
     const [, set_category_page_in_dom] = (0, $42858f023ef23dab$export$8e769ad4338a911e).category_page_in_dom;
@@ -485,34 +604,40 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     (0, $TZSbU$onCleanup)(()=>set_category_page_in_dom(false));
     (0, $TZSbU$createComputed)(()=>{
         const { categoryId: categoryId  } = props;
-        depict_category.category_id = categoryId;
+        depict_category().category_id = categoryId;
         if (categoryId) {
             set_category_state_set(true);
             (0, $42858f023ef23dab$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
         }
     });
-    (0, $TZSbU$createComputed)(()=>depict_category.listing_type = props.listingType);
-    const category = ()=>(0, $TZSbU$CategoryPage)({
-            depict_category: depict_category,
-            get cols_at_size () {
-                return props.columnsAtSize ?? (0, $TZSbU$defaultColsAtSize);
-            },
-            get grid_spacing () {
-                return props.gridSpacing ?? (0, $TZSbU$defaultGridSpacing);
-            },
-            category_title: (0, $TZSbU$untrack)(()=>props.categoryTitlePlugin) || (0, $TZSbU$defaultCategoryTitlePlugin),
-            get show_breadcrumbs () {
-                return props.showBreadcrumbs;
-            },
-            get show_quicklinks () {
-                return props.showQuicklinks;
-            },
-            product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
-                    display: display,
-                    react_template: (0, $TZSbU$untrack)(()=>props.productCard),
-                    component_portals: component_portals,
-                    set_portals: set_portals
-                })
+    (0, $TZSbU$createComputed)(()=>depict_category().listing_type = props.listingType);
+    const category = ()=>(0, $TZSbU$createMemo)(()=>{
+            const stateKey = (0, $TZSbU$untrack)(()=>props.stateKey);
+            if ($48d7f568740a317d$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple CategoryPage components with the same stateKey: ${stateKey}. Each CategoryPage component must have a unique stateKey.`);
+            $48d7f568740a317d$var$rendered_components_with_state_key.add(stateKey);
+            (0, $TZSbU$onCleanup)(()=>$48d7f568740a317d$var$rendered_components_with_state_key.delete(stateKey));
+            return (0, $TZSbU$CategoryPage)({
+                depict_category: depict_category(),
+                get cols_at_size () {
+                    return props.columnsAtSize ?? (0, $TZSbU$defaultColsAtSize);
+                },
+                get grid_spacing () {
+                    return props.gridSpacing ?? (0, $TZSbU$defaultGridSpacing);
+                },
+                category_title: (0, $TZSbU$untrack)(()=>props.categoryTitlePlugin) || (0, $TZSbU$defaultCategoryTitlePlugin),
+                get show_breadcrumbs () {
+                    return props.showBreadcrumbs;
+                },
+                get show_quicklinks () {
+                    return props.showQuicklinks;
+                },
+                product_card_template: (display)=>(0, $c83ba9ab79386687$export$79c79419c1ef0081)({
+                        display: display,
+                        react_template: (0, $TZSbU$untrack)(()=>props.productCard),
+                        component_portals: component_portals,
+                        set_portals: set_portals
+                    })
+            });
         });
     return (0, $c83ba9ab79386687$export$e5139bbbb9a05035)(category, category_state_set);
 }
@@ -521,17 +646,20 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
 
 
 
-function $f866f7ed9f751af4$export$5646050d516e06bc() {
+
+function $f866f7ed9f751af4$export$5646050d516e06bc(react_props) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
         solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($f866f7ed9f751af4$var$vanilla_breadcrumbs),
-        props: undefined
+        props: react_props
     });
 }
-function $f866f7ed9f751af4$var$vanilla_breadcrumbs() {
-    const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
-    if (!depict_category) throw Error("No depict_category instance when rendering BreadCrumbs. Did you forget to wrap your app in DepictProvider?");
-    return (0, $TZSbU$BreadCrumbs)({
-        depict_category: depict_category
+function $f866f7ed9f751af4$var$vanilla_breadcrumbs(props) {
+    // memo so stateKey can be dynamically changed
+    return (0, $TZSbU$createMemo)(()=>{
+        const depict_category = (0, $99489374cd4f601d$export$f4d89133c6985668)("category", props.stateKey, "BreadCrumbs");
+        return (0, $TZSbU$BreadCrumbs)({
+            depict_category: depict_category
+        });
     });
 }
 
@@ -539,17 +667,20 @@ function $f866f7ed9f751af4$var$vanilla_breadcrumbs() {
 
 
 
-function $b68a14248b7ef667$export$466cdc317043f6cb() {
+
+function $b68a14248b7ef667$export$466cdc317043f6cb(react_props = {}) {
     return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
         solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($b68a14248b7ef667$var$vanilla_quick_links),
-        props: {}
+        props: react_props
     });
 }
-function $b68a14248b7ef667$var$vanilla_quick_links() {
-    const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
-    if (!depict_category) throw Error("No depict_category instance when rendering QuickLinks. Did you forget to wrap your app in DepictProvider?");
-    return (0, $TZSbU$QuickLinks)({
-        depict_category: depict_category
+function $b68a14248b7ef667$var$vanilla_quick_links(props) {
+    // memo so stateKey can be dynamically changed
+    return (0, $TZSbU$createMemo)(()=>{
+        const depict_category = (0, $99489374cd4f601d$export$f4d89133c6985668)("category", props.stateKey, "QuickLinks");
+        return (0, $TZSbU$QuickLinks)({
+            depict_category: depict_category
+        });
     });
 }
 
@@ -595,21 +726,34 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = (raw_react_props)=>{
 
 
 
+
+
+
 const $41cab674edff4277$export$d69d8daa20eae175 = (createOpenModalParams)=>{
-    const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
+    const { location: location = "centered" , alignerRef: alignerRef , stateKey: stateKey  } = createOpenModalParams;
+    let [deduped_variable, set_deduped_variable] = (0, $TZSbU$useState)();
+    // When component using this hook unmounts, "untrack" our component and dispose the search instance if needed
+    (0, $TZSbU$useEffect)(()=>deduped_variable?.[1]?.(), []);
     const openModal = ()=>{
-        const { search: search  } = globalState;
-        if (search) {
-            if (location === "aligned" && alignerRef?.current) (0, $TZSbU$open_modal_with_alignment)({
-                "element": alignerRef.current,
-                "location": location,
-                "search": search
-            });
-            else (0, $TZSbU$open_modal_with_alignment)({
-                "location": "centered",
-                "search": search
-            });
-        } else throw new Error("Depict search is not configured. Add to your DepictProvider.");
+        // Get the search instance and track this component, but only once (basically work around re-rendering)
+        // We have to do this in the openModal function since people might call this hook before creating DepictProvider
+        if (!deduped_variable) {
+            deduped_variable = (0, $TZSbU$createRoot)((dispose)=>[
+                    (0, $99489374cd4f601d$export$f4d89133c6985668)("search", stateKey, "useSearchModal"),
+                    dispose
+                ]);
+            set_deduped_variable(deduped_variable);
+        }
+        const [search] = deduped_variable;
+        if (location === "aligned" && alignerRef?.current) (0, $TZSbU$open_modal_with_alignment)({
+            "element": alignerRef.current,
+            "location": location,
+            "search": search
+        });
+        else (0, $TZSbU$open_modal_with_alignment)({
+            "location": "centered",
+            "search": search
+        });
     };
     return openModal;
 };
@@ -639,13 +783,18 @@ const $2b886cf548a4775c$export$9bb30bbe003b82e0 = (props = {})=>{
     set_aligner_signal_value(props?.alignerRef);
     // Make sure react never re-renders the actual SearchField component
     const componentFunction = (0, $TZSbU$useCallback)(()=>(0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
-            solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
-                    depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search,
-                    get aligner_ref () {
-                        // React mutates the object at some random time so only get the current value once it actually is requested
-                        return get_aligner_signal_value()?.current;
-                    }
-                })),
+            solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>{
+                return (0, $TZSbU$createMemo)(()=>{
+                    const depict_search = (0, $99489374cd4f601d$export$f4d89133c6985668)("search", props.stateKey, "useSearchField");
+                    return (0, $TZSbU$SearchField)({
+                        depict_search: depict_search,
+                        get aligner_ref () {
+                            // React mutates the object at some random time so only get the current value once it actually is requested
+                            return get_aligner_signal_value()?.current;
+                        }
+                    });
+                });
+            }),
             props: {}
         }), []);
     return {
@@ -657,19 +806,22 @@ const $2b886cf548a4775c$export$9bb30bbe003b82e0 = (props = {})=>{
 
 
 
+
 function $1bb4271dc44722e2$export$6501da23a2770fc() {
     return {
         fetchRecommendations: $1bb4271dc44722e2$var$fetchRecommendations
     };
 }
 function $1bb4271dc44722e2$var$fetchRecommendations(opts) {
-    const { merchant: merchant , market: market , userId: userId , sessionId: sessionId  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
+    const { merchant: [get_merchant] , market: [get_market] , userId: [get_userId] , sessionId: [get_sessionId]  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
+    const merchant = (0, $TZSbU$untrack)(get_merchant);
+    const market = (0, $TZSbU$untrack)(get_market);
     if (!merchant || !market) throw new Error("Depict recommendations are not configured. Wrap your app in a DepictProvider.");
     return (0, $TZSbU$fetchDepictRecommendations)({
         merchant: merchant,
         market: market,
-        userId: userId,
-        sessionId: sessionId,
+        userId: (0, $TZSbU$untrack)(get_userId),
+        sessionId: (0, $TZSbU$untrack)(get_sessionId),
         ...opts
     });
 }

package/dist-server/index.d.ts

@@ -33,7 +33,7 @@ interface UseFetchRecommendationsReturn<T extends Display> {
      */
     fetchRecommendations: (opts: FetchRecsOptions) => Promise<T[]>;
 }
-export const version = "1.3.10";
+export const version = "1.5.1";
 export function DepictProvider(props: any): any;
 export function SearchPage(): any;
 export function CategoryPage(): any;

package/dist-server/main.js

@@ -40,7 +40,7 @@ function $35dfe83eec81954c$export$4b564d7f5a1b1d43({ solid_component: solid_comp
 }
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "1.3.10";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.5.1";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {