@depict-ai/react-ui 2.0.10 → 2.0.11

package/ES10/index.cjs

@@ -38,7 +38,7 @@ $parcel$export(module.exports, "version", () => $efbdd2dab4314170$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $0d3a2413fdeb34b9$export$b8a61e5c71402559);
 /*! 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 $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.10";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.11";
 const $ef516b1f92253963$export$8e769ad4338a911e = {
   usedLocale: $2kiy7$solidjs.createSignal((0, $2kiy7$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -515,16 +515,19 @@ async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
     display: display,
     component_portals: component_portals,
     set_portals: set_portals,
-    react_template: react_template
+    get_react_template: get_react_template
   } = _ref;
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  let call_when_template_changes;
   const owner = $2kiy7$solidjs.getOwner();
   const reactProductCard = $2kiy7$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $2kiy7$react.useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $2kiy7$react.useState(() => $2kiy7$solidjs.untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -539,6 +542,16 @@ async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
   const portal = $2kiy7$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $2kiy7$solidjs.createEffect($2kiy7$solidjs.on(get_react_template, new_template => queueMicrotask(() => {
+    var _call_when_template_c;
+    return (
+      // if we update the state inside the portal synchronously from the parent call react gets confused with "Warning: Cannot update a component (`Unknown`) while rendering a different component (`$48d7f568740a317d$export$f7d2f673fc2f091d`). To locate the bad setState() call inside `$48d7f568740a317d$export$f7d2f673fc2f091d`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
+      // Therefore do it after a microtask to evade detection
+      (_call_when_template_c = call_when_template_changes) === null || _call_when_template_c === void 0 ? void 0 : _call_when_template_c(() => new_template)
+    );
+  }), {
+    defer: true
+  })); // If we get a new template. call the useState hook thing so we correctly re-execute with the new template
   $2kiy7$solidjs.onCleanup(() => {
     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
@@ -615,7 +628,7 @@ function $735104b46c50160f$var$SolidSearchPage(props, set_portals) {
       depict_search: depict_search(),
       product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
         display: display,
-        react_template: $2kiy7$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -645,7 +658,9 @@ const $15691268d8df90a9$var$rendered_components_with_state_key = new Set();
 function $15691268d8df90a9$export$f7d2f673fc2f091d(props) {
   return $e7ba61a7074c02d3$export$f6e64e17bd69eeef({
     // @ts-ignore
-    solid_component: $e7ba61a7074c02d3$export$e5139bbbb9a05035($15691268d8df90a9$var$SolidCategoryPage),
+    solid_component: function () {
+      return $e7ba61a7074c02d3$export$e5139bbbb9a05035($15691268d8df90a9$var$SolidCategoryPage)(...arguments);
+    },
     props: props,
     wrapper_type: "div",
     wrapper_style: {}
@@ -696,7 +711,7 @@ function $15691268d8df90a9$var$SolidCategoryPage(props, set_portals) {
       },
       product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
         display: display,
-        react_template: $2kiy7$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -776,7 +791,7 @@ function $745b83c12baac3c0$export$5abb40edfde2a843(props, set_portals) {
     },
     product_card_template: display => $99405615baa3d774$export$79c79419c1ef0081({
       display: display,
-      react_template: $2kiy7$solidjs.untrack(() => props.productCard),
+      get_react_template: () => props.productCard,
       component_portals: component_portals,
       set_portals: set_portals
     }),
@@ -806,7 +821,7 @@ function $27d583018ba6e604$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $99405615baa3d774$export$79c79419c1ef0081({
         display: display,
-        react_template: $2kiy7$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });

package/ES10/index.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, ReactNode, ReactPortal, ReactElement } from "
 import { BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/ES10";
 import { Locale } from "@depict-ai/ui/locales/ES10";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-export const version = "2.0.10";
+export const version = "2.0.11";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }

package/ES10/index.js

@@ -1,6 +1,6 @@
 import { add_to_version_info as $jb2Oo$add_to_version_info, catchify as $jb2Oo$catchify, queueMacroTask as $jb2Oo$queueMacroTask, instant_exec_on_suspect_history_change as $jb2Oo$instant_exec_on_suspect_history_change, derror as $jb2Oo$derror } from "@depict-ai/utilishared/ES10";
 import { CategoryTitle as $383b6fd56bf151bd$re_export$CategoryTitle, embedded_num_products as $383b6fd56bf151bd$re_export$EmbeddedNumProducts, DepictAPI as $jb2Oo$DepictAPI, DepictSearch as $jb2Oo$DepictSearch, DepictCategory as $jb2Oo$DepictCategory, get_search_query_updating_blocked_signal as $jb2Oo$get_search_query_updating_blocked_signal, SearchPage as $jb2Oo$SearchPage, defaultColsAtSize as $jb2Oo$defaultColsAtSize, defaultGridSpacing as $jb2Oo$defaultGridSpacing, ProductCardError as $jb2Oo$ProductCardError, CategoryPage as $jb2Oo$CategoryPage, defaultCategoryTitlePlugin as $jb2Oo$defaultCategoryTitlePlugin, BreadCrumbs as $jb2Oo$BreadCrumbs, QuickLinks as $jb2Oo$QuickLinks, ImagePlaceholder as $jb2Oo$ImagePlaceholder, TextPlaceholder as $jb2Oo$TextPlaceholder, RecommendationSlider as $jb2Oo$RecommendationSlider, RecommendationGrid as $jb2Oo$RecommendationGrid, open_modal_with_alignment as $jb2Oo$open_modal_with_alignment, SearchField as $jb2Oo$SearchField, fetchDepictRecommendations as $jb2Oo$fetchDepictRecommendations } from "@depict-ai/ui/ES10";
-import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner } from "solid-js";
+import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, on as $jb2Oo$on } from "solid-js";
 import { createElement as $jb2Oo$createElement, Fragment as $jb2Oo$Fragment, useEffect as $jb2Oo$useEffect, useState as $jb2Oo$useState, useRef as $jb2Oo$useRef, forwardRef as $jb2Oo$forwardRef, Component as $jb2Oo$Component, useCallback as $jb2Oo$useCallback } from "react";
 import { defaultLocale as $jb2Oo$defaultLocale } from "@depict-ai/ui/locales/ES10";
 import { render as $jb2Oo$render, hydrate as $jb2Oo$hydrate, isServer as $jb2Oo$isServer } from "solid-js/web";
@@ -14,7 +14,7 @@ import { renderToString as $jb2Oo$renderToString } from "react-dom/server";
 // Note, if you add an export here, also add one in src-server/main.ts
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "ES10");
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.10";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.11";
 const $8c691d7f86317052$export$8e769ad4338a911e = {
   usedLocale: $jb2Oo$createSignal((0, $jb2Oo$defaultLocale)),
   search_instances: new Map(),
@@ -491,16 +491,19 @@ async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
     display: display,
     component_portals: component_portals,
     set_portals: set_portals,
-    react_template: react_template
+    get_react_template: get_react_template
   } = _ref;
   let set_react_has_ran_hooks;
   let was_cleaned_up = false;
   const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
   const solid_container = document.createElement("div");
+  let call_when_template_changes;
   const owner = $jb2Oo$getOwner();
   const reactProductCard = $jb2Oo$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $jb2Oo$useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $jb2Oo$useState(() => $jb2Oo$untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -515,6 +518,16 @@ async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
   const portal = $jb2Oo$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $jb2Oo$createEffect($jb2Oo$on(get_react_template, new_template => queueMicrotask(() => {
+    var _call_when_template_c;
+    return (
+      // if we update the state inside the portal synchronously from the parent call react gets confused with "Warning: Cannot update a component (`Unknown`) while rendering a different component (`$48d7f568740a317d$export$f7d2f673fc2f091d`). To locate the bad setState() call inside `$48d7f568740a317d$export$f7d2f673fc2f091d`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
+      // Therefore do it after a microtask to evade detection
+      (_call_when_template_c = call_when_template_changes) === null || _call_when_template_c === void 0 ? void 0 : _call_when_template_c(() => new_template)
+    );
+  }), {
+    defer: true
+  })); // If we get a new template. call the useState hook thing so we correctly re-execute with the new template
   $jb2Oo$onCleanup(() => {
     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
@@ -591,7 +604,7 @@ function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
       depict_search: depict_search(),
       product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
         display: display,
-        react_template: $jb2Oo$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -621,7 +634,9 @@ const $e86a296a07b17ad5$var$rendered_components_with_state_key = new Set();
 function $e86a296a07b17ad5$export$f7d2f673fc2f091d(props) {
   return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
     // @ts-ignore
-    solid_component: $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035($e86a296a07b17ad5$var$SolidCategoryPage),
+    solid_component: function () {
+      return $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035($e86a296a07b17ad5$var$SolidCategoryPage)(...arguments);
+    },
     props: props,
     wrapper_type: "div",
     wrapper_style: {}
@@ -672,7 +687,7 @@ function $e86a296a07b17ad5$var$SolidCategoryPage(props, set_portals) {
       },
       product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
         display: display,
-        react_template: $jb2Oo$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -752,7 +767,7 @@ function $c02e9fd51f31a1bd$export$5abb40edfde2a843(props, set_portals) {
     },
     product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
       display: display,
-      react_template: $jb2Oo$untrack(() => props.productCard),
+      get_react_template: () => props.productCard,
       component_portals: component_portals,
       set_portals: set_portals
     }),
@@ -782,7 +797,7 @@ function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $6593e4e126cb318f$export$79c79419c1ef0081({
         display: display,
-        react_template: $jb2Oo$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });