@ninetailed/experience.js-react 4.0.0-beta.8 → 4.1.0-beta.0

package/index.cjs

@@ -2501,6 +2501,29 @@ const ComponentWrapper = _a => {
   });
 };
 
+/**
+ * This component is used to conditionally render Experiences which may include empty variants.
+ * It is essential to intercept the props within the ComponentWrapper to be able to get the current variant.
+ * Note: the passed props can be altered by the render plugins.
+ */
+const ConditionalRenderComponent = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  if ('hidden' in props && props.hidden) {
+    return null;
+  }
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: React__default["default"].Children.map(children, child => {
+      if ( /*#__PURE__*/React__default["default"].isValidElement(child)) {
+        return /*#__PURE__*/React__default["default"].cloneElement(child, props);
+      }
+      return null;
+    })
+  });
+};
+
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2633,19 +2656,21 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    children: 'hidden' in variant && variant.hidden ? null : jsxRuntime.jsx(ComponentWrapper, Object.assign({
+    children: jsxRuntime.jsx(ComponentWrapper, Object.assign({
       experiences: experiences,
       baseline: baseline
     }, {
-      children: /*#__PURE__*/React.createElement(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
-        key: `${experience.id}-${variant.id}`,
-        ninetailed: {
-          isPersonalized,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+      children: jsxRuntime.jsx(ConditionalRenderComponent, {
+        children: /*#__PURE__*/React.createElement(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
+          key: `${experience.id}-${variant.id}`,
+          ninetailed: {
+            isPersonalized,
+            audience: {
+              id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+            }
           }
-        }
-      }))
+        }))
+      })
     }))
   }));
 };

package/index.js

@@ -2488,6 +2488,29 @@ const ComponentWrapper = _a => {
   });
 };
 
+/**
+ * This component is used to conditionally render Experiences which may include empty variants.
+ * It is essential to intercept the props within the ComponentWrapper to be able to get the current variant.
+ * Note: the passed props can be altered by the render plugins.
+ */
+const ConditionalRenderComponent = _a => {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  if ('hidden' in props && props.hidden) {
+    return null;
+  }
+  return jsx(Fragment, {
+    children: React.Children.map(children, child => {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        return /*#__PURE__*/React.cloneElement(child, props);
+      }
+      return null;
+    })
+  });
+};
+
 const DefaultExperienceLoadingComponent = _a => {
   var {
       component: Component,
@@ -2620,19 +2643,21 @@ const Experience = _a => {
     // the profile is definitely defined, otherwise there wouldn't be an experience selected
     profile: profile
   }, {
-    children: 'hidden' in variant && variant.hidden ? null : jsx(ComponentWrapper, Object.assign({
+    children: jsx(ComponentWrapper, Object.assign({
       experiences: experiences,
       baseline: baseline
     }, {
-      children: /*#__PURE__*/createElement$1(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
-        key: `${experience.id}-${variant.id}`,
-        ninetailed: {
-          isPersonalized,
-          audience: {
-            id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+      children: jsx(ConditionalRenderComponent, {
+        children: /*#__PURE__*/createElement$1(Component, Object.assign({}, Object.assign(Object.assign({}, passthroughProps), variant), {
+          key: `${experience.id}-${variant.id}`,
+          ninetailed: {
+            isPersonalized,
+            audience: {
+              id: (audience === null || audience === void 0 ? void 0 : audience.id) || 'all visitors'
+            }
           }
-        }
-      }))
+        }))
+      })
     }))
   }));
 };

package/lib/Experience/ConditionalComponentRenderer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * This component is used to conditionally render Experiences which may include empty variants.
+ * It is essential to intercept the props within the ComponentWrapper to be able to get the current variant.
+ * Note: the passed props can be altered by the render plugins.
+ */
+export declare const ConditionalRenderComponent: React.FC<React.PropsWithChildren>;

package/lib/RenderPlugin/ComponentWrapper.d.ts

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
 import { Baseline, ExperienceConfiguration } from '@ninetailed/experience.js';
-import { Variant } from '../Experience/types/Variant';
+import { Variant } from '../Experience/types';
 type ComponentRenderInterceptorWrapperProps = {
     experiences: ExperienceConfiguration<Variant<any>>[];
     baseline: Baseline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "4.0.0-beta.8",
+  "version": "4.1.0-beta.0",
   "peerDependencies": {
     "react": ">=16.8.0"
   },
@@ -8,9 +8,9 @@
     "@analytics/google-analytics": "0.5.3",
     "react-visibility-sensor": "5.1.1",
     "lodash": "4.17.21",
-    "@ninetailed/experience.js": "4.0.0-beta.8",
+    "@ninetailed/experience.js": "4.1.0-beta.0",
     "react-intersection-observer": "8.34.0",
-    "@ninetailed/experience.js-shared": "4.0.0-beta.8",
+    "@ninetailed/experience.js-shared": "4.1.0-beta.0",
     "analytics": "0.8.1"
   },
   "module": "./index.js",