@depict-ai/react-ui 3.0.6 → 3.0.8

package/ES10/index.cjs

@@ -39,7 +39,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 = "3.0.6";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "3.0.8";
 const $ef516b1f92253963$export$8e769ad4338a911e = {
   usedLocale: $2kiy7$solidjs.createSignal((0, $2kiy7$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -95,6 +95,20 @@ function $e7ba61a7074c02d3$export$f6e64e17bd69eeef(_ref) {
     // If someone only rendered a solid component on the client that *could* be hydrated (no childNodes) then we fall back to `render` to avoid solid complaining about not being able to hydrate or crashing because the result of generateHydrationScript hasn't run at all
     // This can happen for HMR or when SSR capable components are only rendered on the client
     const render_function = hydrate_function_when_ssr && wrapper_element.childNodes.length ? hydrate_function_when_ssr : (0, $2kiy7$solidjsweb.render);
+    // Our system of suppressing hydration warnings and SSR-ing seems to generally work (all the time also in our test storefronts)
+    // But sometimes in prod (see https://depictaiworkspace.slack.com/archives/C061PGT2N3A/p1702038855265339) react for some reason actually sets innerHTML = ""; on our wrapper
+    // Deleting all our elements. To prevent that we just patch innerHTML to not do anything when being set to a new value
+    if (hydrate_function_when_ssr && !Object.getOwnPropertyNames(wrapper_element).includes("innerHTML")) Object.defineProperty(wrapper_element, "innerHTML", {
+      configurable: false,
+      enumerable: true,
+      get() {
+        var _Object$getOwnPropert, _Object$getOwnPropert2;
+        return (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(Element.prototype, "innerHTML")) === null || _Object$getOwnPropert === void 0 ? void 0 : (_Object$getOwnPropert2 = _Object$getOwnPropert.get) === null || _Object$getOwnPropert2 === void 0 ? void 0 : _Object$getOwnPropert2.call(wrapper_element);
+      },
+      set() {
+        // Do nothing
+      }
+    });
     const dispose = render_function(() => solid_component(store, set_portals), wrapper_element);
     return dispose;
   }, []);
@@ -887,11 +901,11 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $2kiy7$solidjsweb.isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $2kiy7$reactdomserver.renderToString($2kiy7$react.createElement(() => props.productCard({
+          t: "<div>".concat($2kiy7$reactdomserver.renderToString($2kiy7$react.createElement(() => props.productCard({
             display: display
-          })))
+          }))), "</div>")
         };
       return $3441d987b5ea85cb$export$32024253978abdc7({
         component_props: {

package/ES10/index.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, FC, ReactNode, ReactPortal, ReactElement } fr
 import { BaseCategoryProviderConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ListingQuery, 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 = "3.0.6";
+export const version = "3.0.8";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }

package/ES10/index.js

@@ -15,7 +15,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 = "3.0.6";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "3.0.8";
 const $8c691d7f86317052$export$8e769ad4338a911e = {
   usedLocale: $jb2Oo$createSignal((0, $jb2Oo$defaultLocale)),
   search_instances: new Map(),
@@ -71,6 +71,20 @@ function $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef(_ref) {
     // If someone only rendered a solid component on the client that *could* be hydrated (no childNodes) then we fall back to `render` to avoid solid complaining about not being able to hydrate or crashing because the result of generateHydrationScript hasn't run at all
     // This can happen for HMR or when SSR capable components are only rendered on the client
     const render_function = hydrate_function_when_ssr && wrapper_element.childNodes.length ? hydrate_function_when_ssr : (0, $jb2Oo$render);
+    // Our system of suppressing hydration warnings and SSR-ing seems to generally work (all the time also in our test storefronts)
+    // But sometimes in prod (see https://depictaiworkspace.slack.com/archives/C061PGT2N3A/p1702038855265339) react for some reason actually sets innerHTML = ""; on our wrapper
+    // Deleting all our elements. To prevent that we just patch innerHTML to not do anything when being set to a new value
+    if (hydrate_function_when_ssr && !Object.getOwnPropertyNames(wrapper_element).includes("innerHTML")) Object.defineProperty(wrapper_element, "innerHTML", {
+      configurable: false,
+      enumerable: true,
+      get() {
+        var _Object$getOwnPropert, _Object$getOwnPropert2;
+        return (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(Element.prototype, "innerHTML")) === null || _Object$getOwnPropert === void 0 ? void 0 : (_Object$getOwnPropert2 = _Object$getOwnPropert.get) === null || _Object$getOwnPropert2 === void 0 ? void 0 : _Object$getOwnPropert2.call(wrapper_element);
+      },
+      set() {
+        // Do nothing
+      }
+    });
     const dispose = render_function(() => solid_component(store, set_portals), wrapper_element);
     return dispose;
   }, []);
@@ -863,11 +877,11 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $jb2Oo$isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $jb2Oo$renderToString($jb2Oo$createElement(() => props.productCard({
+          t: "<div>".concat($jb2Oo$renderToString($jb2Oo$createElement(() => props.productCard({
             display: display
-          })))
+          }))), "</div>")
         };
       return $cce08f18e2476cbf$export$32024253978abdc7({
         component_props: {

package/latest/index.cjs

@@ -39,7 +39,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 = "3.0.6";
+const $db7b67857900028b$export$83d89fbfd8236492 = "3.0.8";
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
   usedLocale: $2IzJs$solidjs.createSignal((0, $2IzJs$depictaiuilocales.defaultLocale)),
   search_instances: new Map(),
@@ -88,6 +88,19 @@ function $b4d0d98857ed9934$export$f6e64e17bd69eeef({
     // If someone only rendered a solid component on the client that *could* be hydrated (no childNodes) then we fall back to `render` to avoid solid complaining about not being able to hydrate or crashing because the result of generateHydrationScript hasn't run at all
     // This can happen for HMR or when SSR capable components are only rendered on the client
     const render_function = hydrate_function_when_ssr && wrapper_element.childNodes.length ? hydrate_function_when_ssr : (0, $2IzJs$solidjsweb.render);
+    // Our system of suppressing hydration warnings and SSR-ing seems to generally work (all the time also in our test storefronts)
+    // But sometimes in prod (see https://depictaiworkspace.slack.com/archives/C061PGT2N3A/p1702038855265339) react for some reason actually sets innerHTML = ""; on our wrapper
+    // Deleting all our elements. To prevent that we just patch innerHTML to not do anything when being set to a new value
+    if (hydrate_function_when_ssr && !Object.getOwnPropertyNames(wrapper_element).includes("innerHTML")) Object.defineProperty(wrapper_element, "innerHTML", {
+      configurable: false,
+      enumerable: true,
+      get() {
+        return Object.getOwnPropertyDescriptor(Element.prototype, "innerHTML")?.get?.call(wrapper_element);
+      },
+      set() {
+        // Do nothing
+      }
+    });
     const dispose = render_function(() => solid_component(store, set_portals), wrapper_element);
     return dispose;
   }, []);
@@ -849,11 +862,11 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $2IzJs$solidjsweb.isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $2IzJs$reactdomserver.renderToString($2IzJs$react.createElement(() => props.productCard({
+          t: `<div>${$2IzJs$reactdomserver.renderToString($2IzJs$react.createElement(() => props.productCard({
             display: display
-          })))
+          })))}</div>`
         };
       return $6081519c185fcf70$export$32024253978abdc7({
         component_props: {

package/latest/index.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, FC, ReactNode, ReactPortal, ReactElement } fr
 import { BaseCategoryProviderConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ListingQuery, 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 = "3.0.6";
+export const version = "3.0.8";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }

package/latest/index.js

@@ -15,7 +15,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 = "3.0.6";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "3.0.8";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
   usedLocale: $2GFvs$createSignal((0, $2GFvs$defaultLocale)),
   search_instances: new Map(),
@@ -64,6 +64,19 @@ function $c83ba9ab79386687$export$f6e64e17bd69eeef({
     // If someone only rendered a solid component on the client that *could* be hydrated (no childNodes) then we fall back to `render` to avoid solid complaining about not being able to hydrate or crashing because the result of generateHydrationScript hasn't run at all
     // This can happen for HMR or when SSR capable components are only rendered on the client
     const render_function = hydrate_function_when_ssr && wrapper_element.childNodes.length ? hydrate_function_when_ssr : (0, $2GFvs$render);
+    // Our system of suppressing hydration warnings and SSR-ing seems to generally work (all the time also in our test storefronts)
+    // But sometimes in prod (see https://depictaiworkspace.slack.com/archives/C061PGT2N3A/p1702038855265339) react for some reason actually sets innerHTML = ""; on our wrapper
+    // Deleting all our elements. To prevent that we just patch innerHTML to not do anything when being set to a new value
+    if (hydrate_function_when_ssr && !Object.getOwnPropertyNames(wrapper_element).includes("innerHTML")) Object.defineProperty(wrapper_element, "innerHTML", {
+      configurable: false,
+      enumerable: true,
+      get() {
+        return Object.getOwnPropertyDescriptor(Element.prototype, "innerHTML")?.get?.call(wrapper_element);
+      },
+      set() {
+        // Do nothing
+      }
+    });
     const dispose = render_function(() => solid_component(store, set_portals), wrapper_element);
     return dispose;
   }, []);
@@ -825,11 +838,11 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $2GFvs$isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $2GFvs$renderToString($2GFvs$createElement(() => props.productCard({
+          t: `<div>${$2GFvs$renderToString($2GFvs$createElement(() => props.productCard({
             display: display
-          })))
+          })))}</div>`
         };
       return $bcf84a32dc612a43$export$32024253978abdc7({
         component_props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "types": "ES10/index.d.ts",
@@ -137,7 +137,7 @@
     "@babel/runtime-corejs3": "latest",
     "@depict-ai/dpc": "^2.0.2",
     "@depict-ai/plp-styling": "^2.0.2",
-    "@depict-ai/ui": "^3.0.8",
+    "@depict-ai/ui": "^3.0.9",
     "@depict-ai/utilishared": "^2.0.2",
     "solid-js": "^1.8.1"
   },

package/server/ES10/index.cjs

@@ -192,11 +192,11 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $aNCHr$solidjsweb.isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $aNCHr$reactdomserver.renderToString($aNCHr$react.createElement(() => props.productCard({
+          t: "<div>".concat($aNCHr$reactdomserver.renderToString($aNCHr$react.createElement(() => props.productCard({
             display: display
-          })))
+          }))), "</div>")
         };
       return $3441d987b5ea85cb$export$32024253978abdc7({
         component_props: {
@@ -233,7 +233,7 @@ function $3b36cc844440a979$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "3.0.6";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "3.0.8";
 function $202459d454907b31$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/ES10/index.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, FC, ReactNode, ReactPortal, ReactElement } fr
 import { BaseCategoryProviderConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ListingQuery, 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 = "3.0.6";
+export const version = "3.0.8";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }

package/server/ES10/index.js

@@ -169,11 +169,11 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $7h5e1$isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $7h5e1$renderToString1($7h5e1$createElement(() => props.productCard({
+          t: "<div>".concat($7h5e1$renderToString1($7h5e1$createElement(() => props.productCard({
             display: display
-          })))
+          }))), "</div>")
         };
       return $cce08f18e2476cbf$export$32024253978abdc7({
         component_props: {
@@ -210,7 +210,7 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "3.0.6";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "3.0.8";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.cjs

@@ -185,11 +185,11 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $7QqFM$solidjsweb.isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $7QqFM$reactdomserver.renderToString($7QqFM$react.createElement(() => props.productCard({
+          t: `<div>${$7QqFM$reactdomserver.renderToString($7QqFM$react.createElement(() => props.productCard({
             display: display
-          })))
+          })))}</div>`
         };
       return $6081519c185fcf70$export$32024253978abdc7({
         component_props: {
@@ -224,7 +224,7 @@ function $c6b960f2a07285c8$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "3.0.6";
+const $db7b67857900028b$export$83d89fbfd8236492 = "3.0.8";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.d.ts

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, FC, ReactNode, ReactPortal, ReactElement } fr
 import { BaseCategoryProviderConfig, BaseProviderConfig, BaseSearchProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ListingQuery, 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 = "3.0.6";
+export const version = "3.0.8";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }

package/server/latest/index.js

@@ -162,11 +162,11 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
     product_card_template: display => {
       if (0, $eOXet$isServer)
         // This function can't be async on the server
-        // @ts-ignore
+        // @ts-ignore emulate the wrapper div that we need in prod here too for consistency
         return {
-          t: $eOXet$renderToString1($eOXet$createElement(() => props.productCard({
+          t: `<div>${$eOXet$renderToString1($eOXet$createElement(() => props.productCard({
             display: display
-          })))
+          })))}</div>`
         };
       return $bcf84a32dc612a43$export$32024253978abdc7({
         component_props: {
@@ -201,7 +201,7 @@ function $4d5c3f13a5ae62a7$export$e46079a2793e9ec7(props, set_portals) {
     }
   });
 }
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "3.0.6";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "3.0.8";
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }