@depict-ai/react-ui 2.0.9 → 2.0.11

package/server/ES10/index.cjs

@@ -1,8 +1,8 @@
 var $aNCHr$react = require("react");
 var $aNCHr$depictaiui = require("@depict-ai/ui/ES10");
 var $aNCHr$solidjsweb = require("solid-js/web");
-var $aNCHr$solidjs = require("solid-js");
 var $aNCHr$reactdomserver = require("react-dom/server");
+var $aNCHr$solidjs = require("solid-js");
 var $aNCHr$reactjsxruntime = require("react/jsx-runtime");
 var $aNCHr$reactdom = require("react-dom");
 require("../../multi_import_deduplicator.cjs").register_es_version("react-ui", "ES10");
@@ -78,16 +78,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 = $aNCHr$solidjs.getOwner();
   const reactProductCard = $aNCHr$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $aNCHr$react.useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $aNCHr$react.useState(() => $aNCHr$solidjs.untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -102,6 +105,16 @@ async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
   const portal = $aNCHr$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $aNCHr$solidjs.createEffect($aNCHr$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
   $aNCHr$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
@@ -129,7 +142,7 @@ function $27d583018ba6e604$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $99405615baa3d774$export$79c79419c1ef0081({
         display: display,
-        react_template: $aNCHr$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });
@@ -157,7 +170,7 @@ function $27d583018ba6e604$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.9";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.11";
 function $202459d454907b31$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/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.9";
+export const version = "2.0.11";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }

package/server/ES10/index.js

@@ -1,8 +1,8 @@
-import { createElement as $7h5e1$createElement, useRef as $7h5e1$useRef, Fragment as $7h5e1$Fragment, useEffect as $7h5e1$useEffect, Component as $7h5e1$Component } from "react";
+import { createElement as $7h5e1$createElement, useRef as $7h5e1$useRef, Fragment as $7h5e1$Fragment, useEffect as $7h5e1$useEffect, useState as $7h5e1$useState, Component as $7h5e1$Component } from "react";
 import { ImagePlaceholder as $7h5e1$ImagePlaceholder, TextPlaceholder as $7h5e1$TextPlaceholder, RecommendationGrid as $7h5e1$RecommendationGrid, defaultColsAtSize as $7h5e1$defaultColsAtSize, defaultGridSpacing as $7h5e1$defaultGridSpacing, ProductCardError as $7h5e1$ProductCardError } from "@depict-ai/ui/ES10";
 import { renderToString as $7h5e1$renderToString, generateHydrationScript as $7h5e1$generateHydrationScript, isServer as $7h5e1$isServer } from "solid-js/web";
-import { untrack as $7h5e1$untrack, getOwner as $7h5e1$getOwner, runWithOwner as $7h5e1$runWithOwner, onCleanup as $7h5e1$onCleanup } from "solid-js";
 import { renderToString as $7h5e1$renderToString1 } from "react-dom/server";
+import { getOwner as $7h5e1$getOwner, untrack as $7h5e1$untrack, runWithOwner as $7h5e1$runWithOwner, createEffect as $7h5e1$createEffect, on as $7h5e1$on, onCleanup as $7h5e1$onCleanup } from "solid-js";
 import { jsx as $7h5e1$jsx } from "react/jsx-runtime";
 import { createPortal as $7h5e1$createPortal } from "react-dom";
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
@@ -55,16 +55,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 = $7h5e1$getOwner();
   const reactProductCard = $7h5e1$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $7h5e1$useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $7h5e1$useState(() => $7h5e1$untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -79,6 +82,16 @@ async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
   const portal = $7h5e1$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $7h5e1$createEffect($7h5e1$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
   $7h5e1$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
@@ -106,7 +119,7 @@ function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $6593e4e126cb318f$export$79c79419c1ef0081({
         display: display,
-        react_template: $7h5e1$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });
@@ -134,7 +147,7 @@ function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.9";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.11";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.cjs

@@ -1,8 +1,8 @@
 var $7QqFM$react = require("react");
 var $7QqFM$depictaiui = require("@depict-ai/ui/latest");
 var $7QqFM$solidjsweb = require("solid-js/web");
-var $7QqFM$solidjs = require("solid-js");
 var $7QqFM$reactdomserver = require("react-dom/server");
+var $7QqFM$solidjs = require("solid-js");
 var $7QqFM$reactjsxruntime = require("react/jsx-runtime");
 var $7QqFM$reactdom = require("react-dom");
 require("../../multi_import_deduplicator.cjs").register_es_version("react-ui", "latest");
@@ -76,16 +76,19 @@ async function $ecaac5ceddb08f39$export$79c79419c1ef0081({
   display: display,
   component_portals: component_portals,
   set_portals: set_portals,
-  react_template: react_template
+  get_react_template: get_react_template
 }) {
   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 = $7QqFM$solidjs.getOwner();
   const reactProductCard = $7QqFM$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $7QqFM$react.useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $7QqFM$react.useState(() => $7QqFM$solidjs.untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -100,6 +103,13 @@ async function $ecaac5ceddb08f39$export$79c79419c1ef0081({
   const portal = $7QqFM$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $7QqFM$solidjs.createEffect($7QqFM$solidjs.on(get_react_template, new_template => queueMicrotask(() =>
+  // When the parent react component re-executes and provides a new product card, we want our react portal to also re-render
+  // 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_changes?.(() => new_template)), {
+    defer: true
+  })); // If we get a new template. call the useState hook thing so we correctly re-execute with the new template
   $7QqFM$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
@@ -127,7 +137,7 @@ function $0aaa03f81d756b85$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $ecaac5ceddb08f39$export$79c79419c1ef0081({
         display: display,
-        react_template: $7QqFM$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });
@@ -153,7 +163,7 @@ function $0aaa03f81d756b85$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "2.0.9";
+const $db7b67857900028b$export$83d89fbfd8236492 = "2.0.11";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/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/latest";
 import { Locale } from "@depict-ai/ui/locales/latest";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
-export const version = "2.0.9";
+export const version = "2.0.11";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }

package/server/latest/index.js

@@ -1,8 +1,8 @@
-import { createElement as $eOXet$createElement, useRef as $eOXet$useRef, Fragment as $eOXet$Fragment, useEffect as $eOXet$useEffect, Component as $eOXet$Component } from "react";
+import { createElement as $eOXet$createElement, useRef as $eOXet$useRef, Fragment as $eOXet$Fragment, useEffect as $eOXet$useEffect, useState as $eOXet$useState, Component as $eOXet$Component } from "react";
 import { ImagePlaceholder as $eOXet$ImagePlaceholder, TextPlaceholder as $eOXet$TextPlaceholder, RecommendationGrid as $eOXet$RecommendationGrid, defaultColsAtSize as $eOXet$defaultColsAtSize, defaultGridSpacing as $eOXet$defaultGridSpacing, ProductCardError as $eOXet$ProductCardError } from "@depict-ai/ui/latest";
 import { renderToString as $eOXet$renderToString, generateHydrationScript as $eOXet$generateHydrationScript, isServer as $eOXet$isServer } from "solid-js/web";
-import { untrack as $eOXet$untrack, getOwner as $eOXet$getOwner, runWithOwner as $eOXet$runWithOwner, onCleanup as $eOXet$onCleanup } from "solid-js";
 import { renderToString as $eOXet$renderToString1 } from "react-dom/server";
+import { getOwner as $eOXet$getOwner, untrack as $eOXet$untrack, runWithOwner as $eOXet$runWithOwner, createEffect as $eOXet$createEffect, on as $eOXet$on, onCleanup as $eOXet$onCleanup } from "solid-js";
 import { jsx as $eOXet$jsx } from "react/jsx-runtime";
 import { createPortal as $eOXet$createPortal } from "react-dom";
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
@@ -53,16 +53,19 @@ async function $75f1064c8b836348$export$79c79419c1ef0081({
   display: display,
   component_portals: component_portals,
   set_portals: set_portals,
-  react_template: react_template
+  get_react_template: get_react_template
 }) {
   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 = $eOXet$getOwner();
   const reactProductCard = $eOXet$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $eOXet$useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $eOXet$useState(() => $eOXet$untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -77,6 +80,13 @@ async function $75f1064c8b836348$export$79c79419c1ef0081({
   const portal = $eOXet$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $eOXet$createEffect($eOXet$on(get_react_template, new_template => queueMicrotask(() =>
+  // When the parent react component re-executes and provides a new product card, we want our react portal to also re-render
+  // 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_changes?.(() => new_template)), {
+    defer: true
+  })); // If we get a new template. call the useState hook thing so we correctly re-execute with the new template
   $eOXet$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
@@ -104,7 +114,7 @@ function $8bee51f55543fe0c$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $75f1064c8b836348$export$79c79419c1ef0081({
         display: display,
-        react_template: $eOXet$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });
@@ -130,7 +140,7 @@ function $8bee51f55543fe0c$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.0.9";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.0.11";
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }