@depict-ai/react-ui 2.0.10 → 2.0.12

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.12";
 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.12";
 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.12";
 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
       });

package/latest/index.cjs

@@ -38,7 +38,7 @@ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$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 $db7b67857900028b$export$83d89fbfd8236492 = "2.0.10";
+const $db7b67857900028b$export$83d89fbfd8236492 = "2.0.12";
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   usedLocale: $2IzJs$solidjs.createSignal((0, $2IzJs$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -495,16 +495,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 = $2IzJs$solidjs.getOwner();
   const reactProductCard = $2IzJs$reactjsxruntime.jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $2IzJs$react.useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $2IzJs$react.useState(() => $2IzJs$solidjs.untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -519,6 +522,13 @@ async function $ecaac5ceddb08f39$export$79c79419c1ef0081({
   const portal = $2IzJs$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $2IzJs$solidjs.createEffect($2IzJs$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
   $2IzJs$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
@@ -592,7 +602,7 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
       depict_search: depict_search(),
       product_card_template: display => $ecaac5ceddb08f39$export$79c79419c1ef0081({
         display: display,
-        react_template: $2IzJs$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -622,7 +632,7 @@ const $5aa5fcb9f8a2bebc$var$rendered_components_with_state_key = new Set();
 function $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d(props) {
   return $b4d0d98857ed9934$export$f6e64e17bd69eeef({
     // @ts-ignore
-    solid_component: $b4d0d98857ed9934$export$e5139bbbb9a05035($5aa5fcb9f8a2bebc$var$SolidCategoryPage),
+    solid_component: (...args) => $b4d0d98857ed9934$export$e5139bbbb9a05035($5aa5fcb9f8a2bebc$var$SolidCategoryPage)(...args),
     props: props,
     wrapper_type: "div",
     wrapper_style: {}
@@ -671,7 +681,7 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
       },
       product_card_template: display => $ecaac5ceddb08f39$export$79c79419c1ef0081({
         display: display,
-        react_template: $2IzJs$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -750,7 +760,7 @@ function $8ffd7da37fdd46be$export$5abb40edfde2a843(props, set_portals) {
     },
     product_card_template: display => $ecaac5ceddb08f39$export$79c79419c1ef0081({
       display: display,
-      react_template: $2IzJs$solidjs.untrack(() => props.productCard),
+      get_react_template: () => props.productCard,
       component_portals: component_portals,
       set_portals: set_portals
     }),
@@ -779,7 +789,7 @@ function $0aaa03f81d756b85$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $ecaac5ceddb08f39$export$79c79419c1ef0081({
         display: display,
-        react_template: $2IzJs$solidjs.untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });

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

package/latest/index.js

@@ -1,6 +1,6 @@
 import { add_to_version_info as $2GFvs$add_to_version_info, catchify as $2GFvs$catchify, queueMacroTask as $2GFvs$queueMacroTask, instant_exec_on_suspect_history_change as $2GFvs$instant_exec_on_suspect_history_change, derror as $2GFvs$derror } from "@depict-ai/utilishared/latest";
 import { CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictAPI as $2GFvs$DepictAPI, DepictSearch as $2GFvs$DepictSearch, DepictCategory as $2GFvs$DepictCategory, get_search_query_updating_blocked_signal as $2GFvs$get_search_query_updating_blocked_signal, SearchPage as $2GFvs$SearchPage, defaultColsAtSize as $2GFvs$defaultColsAtSize, defaultGridSpacing as $2GFvs$defaultGridSpacing, ProductCardError as $2GFvs$ProductCardError, CategoryPage as $2GFvs$CategoryPage, defaultCategoryTitlePlugin as $2GFvs$defaultCategoryTitlePlugin, BreadCrumbs as $2GFvs$BreadCrumbs, QuickLinks as $2GFvs$QuickLinks, ImagePlaceholder as $2GFvs$ImagePlaceholder, TextPlaceholder as $2GFvs$TextPlaceholder, RecommendationSlider as $2GFvs$RecommendationSlider, RecommendationGrid as $2GFvs$RecommendationGrid, open_modal_with_alignment as $2GFvs$open_modal_with_alignment, SearchField as $2GFvs$SearchField, fetchDepictRecommendations as $2GFvs$fetchDepictRecommendations } from "@depict-ai/ui/latest";
-import { untrack as $2GFvs$untrack, createRoot as $2GFvs$createRoot, createEffect as $2GFvs$createEffect, createMemo as $2GFvs$createMemo, createComponent as $2GFvs$createComponent, Show as $2GFvs$Show, createSignal as $2GFvs$createSignal, createComputed as $2GFvs$createComputed, onCleanup as $2GFvs$onCleanup, getOwner as $2GFvs$getOwner, runWithOwner as $2GFvs$runWithOwner } from "solid-js";
+import { untrack as $2GFvs$untrack, createRoot as $2GFvs$createRoot, createEffect as $2GFvs$createEffect, createMemo as $2GFvs$createMemo, createComponent as $2GFvs$createComponent, Show as $2GFvs$Show, createSignal as $2GFvs$createSignal, createComputed as $2GFvs$createComputed, onCleanup as $2GFvs$onCleanup, getOwner as $2GFvs$getOwner, runWithOwner as $2GFvs$runWithOwner, on as $2GFvs$on } from "solid-js";
 import { createElement as $2GFvs$createElement, Fragment as $2GFvs$Fragment, useEffect as $2GFvs$useEffect, useState as $2GFvs$useState, useRef as $2GFvs$useRef, forwardRef as $2GFvs$forwardRef, Component as $2GFvs$Component, useCallback as $2GFvs$useCallback } from "react";
 import { defaultLocale as $2GFvs$defaultLocale } from "@depict-ai/ui/locales/latest";
 import { render as $2GFvs$render, hydrate as $2GFvs$hydrate, isServer as $2GFvs$isServer } from "solid-js/web";
@@ -14,7 +14,7 @@ import { renderToString as $2GFvs$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", "latest");
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.0.10";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.0.12";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
   usedLocale: $2GFvs$createSignal((0, $2GFvs$defaultLocale)),
   search_instances: new Map(),
@@ -471,16 +471,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 = $2GFvs$getOwner();
   const reactProductCard = $2GFvs$jsx(props => {
     // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
     $2GFvs$useEffect(set_react_has_ran_hooks, []);
+    const [react_template, set_react_template] = $2GFvs$useState(() => $2GFvs$untrack(get_react_template));
+    call_when_template_changes = set_react_template;
     return react_template(props);
   }, {
     display: display
@@ -495,6 +498,13 @@ async function $75f1064c8b836348$export$79c79419c1ef0081({
   const portal = $2GFvs$createPortal(reactProductCardInErrorBoundary, solid_container);
   component_portals.add(portal);
   set_portals([...component_portals]);
+  $2GFvs$createEffect($2GFvs$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
   $2GFvs$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
@@ -568,7 +578,7 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
       depict_search: depict_search(),
       product_card_template: display => $75f1064c8b836348$export$79c79419c1ef0081({
         display: display,
-        react_template: $2GFvs$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -598,7 +608,7 @@ const $48d7f568740a317d$var$rendered_components_with_state_key = new Set();
 function $48d7f568740a317d$export$f7d2f673fc2f091d(props) {
   return $c83ba9ab79386687$export$f6e64e17bd69eeef({
     // @ts-ignore
-    solid_component: $c83ba9ab79386687$export$e5139bbbb9a05035($48d7f568740a317d$var$SolidCategoryPage),
+    solid_component: (...args) => $c83ba9ab79386687$export$e5139bbbb9a05035($48d7f568740a317d$var$SolidCategoryPage)(...args),
     props: props,
     wrapper_type: "div",
     wrapper_style: {}
@@ -647,7 +657,7 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
       },
       product_card_template: display => $75f1064c8b836348$export$79c79419c1ef0081({
         display: display,
-        react_template: $2GFvs$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       })
@@ -726,7 +736,7 @@ function $4fd5dc0e231a60d9$export$5abb40edfde2a843(props, set_portals) {
     },
     product_card_template: display => $75f1064c8b836348$export$79c79419c1ef0081({
       display: display,
-      react_template: $2GFvs$untrack(() => props.productCard),
+      get_react_template: () => props.productCard,
       component_portals: component_portals,
       set_portals: set_portals
     }),
@@ -755,7 +765,7 @@ function $8bee51f55543fe0c$export$bd8acc07a8bae229(props, set_portals) {
         };
       return $75f1064c8b836348$export$79c79419c1ef0081({
         display: display,
-        react_template: $2GFvs$untrack(() => props.productCard),
+        get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "types": "ES10/index.d.ts",
@@ -135,10 +135,10 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/dpc": "^1.0.41",
+    "@depict-ai/dpc": "^1.0.42",
     "@depict-ai/plp-styling": "^1.2.5",
-    "@depict-ai/ui": "^2.0.21",
-    "@depict-ai/utilishared": "^1.0.45",
+    "@depict-ai/ui": "^2.0.22",
+    "@depict-ai/utilishared": "^1.0.46",
     "solid-js": "^1.7.3"
   },
   "peerDependencies": {

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.10";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.12";
 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.10";
+export const version = "2.0.12";
 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.10";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.12";
 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.10";
+const $db7b67857900028b$export$83d89fbfd8236492 = "2.0.12";
 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.10";
+export const version = "2.0.12";
 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.10";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.0.12";
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }