@builder.io/sdk-react-native 4.0.8 → 4.0.10

package/src/blocks/personalization-container/helpers/inlined-fns.ts

@@ -84,5 +84,45 @@ export function filterWithCustomTargeting(userAttributes: UserAttributes, query:
     return objectMatchesQuery(userAttributes, filter);
   });
 }
-export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  function removeVariants() {\n    variants?.forEach(function (_, index) {\n      document.querySelector('template[data-variant-id=\"' + blockId + '-' + index + '\"]')?.remove();\n    });\n    document.querySelector('script[data-id=\"variants-script-' + blockId + '\"]')?.remove();\n    document.querySelector('style[data-id=\"variants-styles-' + blockId + '\"]')?.remove();\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const isDebug = location.href.includes('builder.debug=true');\n  if (isDebug) {\n    console.debug('PersonalizationContainer', {\n      attributes,\n      variants,\n      winningVariantIndex\n    });\n  }\n  if (winningVariantIndex !== -1) {\n    const winningVariant = document.querySelector('template[data-variant-id=\"' + blockId + '-' + winningVariantIndex + '\"]');\n    if (winningVariant) {\n      const parentNode = winningVariant.parentNode;\n      if (parentNode) {\n        const newParent = parentNode.cloneNode(false);\n        newParent.appendChild(winningVariant.content.firstChild);\n        newParent.appendChild(winningVariant.content.lastChild);\n        parentNode.parentNode?.replaceChild(newParent, parentNode);\n      }\n      if (isDebug) {\n        console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);\n      }\n    }\n  } else if (variants && variants.length > 0) {\n    removeVariants();\n  }\n}";
-export const FILTER_WITH_CUSTOM_TARGETING_SCRIPT = "function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {\n  function isString(val) {\n    return typeof val === 'string';\n  }\n  function isNumber(val) {\n    return typeof val === 'number';\n  }\n  function objectMatchesQuery(userattr, query) {\n    const result = (() => {\n      const property = query.property;\n      const operator = query.operator;\n      let testValue = query.value;\n      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {\n        testValue = query.value.slice(0, -1);\n      }\n      if (!(property && operator)) {\n        return true;\n      }\n      if (Array.isArray(testValue)) {\n        if (operator === 'isNot') {\n          return testValue.every(val => objectMatchesQuery(userattr, {\n            property,\n            operator,\n            value: val\n          }));\n        }\n        return !!testValue.find(val => objectMatchesQuery(userattr, {\n          property,\n          operator,\n          value: val\n        }));\n      }\n      const value = userattr[property];\n      if (Array.isArray(value)) {\n        return value.includes(testValue);\n      }\n      switch (operator) {\n        case 'is':\n          return value === testValue;\n        case 'isNot':\n          return value !== testValue;\n        case 'contains':\n          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));\n        case 'startsWith':\n          return isString(value) && value.startsWith(String(testValue));\n        case 'endsWith':\n          return isString(value) && value.endsWith(String(testValue));\n        case 'greaterThan':\n          return isNumber(value) && isNumber(testValue) && value > testValue;\n        case 'lessThan':\n          return isNumber(value) && isNumber(testValue) && value < testValue;\n        case 'greaterThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value >= testValue;\n        case 'lessThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value <= testValue;\n        default:\n          return false;\n      }\n    })();\n    return result;\n  }\n  const item = {\n    query,\n    startDate,\n    endDate\n  };\n  const now = userAttributes.date && new Date(userAttributes.date) || new Date();\n  if (item.startDate && new Date(item.startDate) > now) {\n    return false;\n  } else if (item.endDate && new Date(item.endDate) < now) {\n    return false;\n  }\n  if (!item.query || !item.query.length) {\n    return true;\n  }\n  return item.query.every(filter => {\n    return objectMatchesQuery(userAttributes, filter);\n  });\n}";
+export function updateVisibilityStylesScript(variants: PersonalizationContainerProps['variants'], blockId: string, isHydrationTarget: boolean, locale?: string) {
+  function getCookie(name: string) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const visibilityStylesEl = (document.currentScript?.previousElementSibling as HTMLStyleElement);
+  if (!visibilityStylesEl) {
+    return;
+  }
+  if (isHydrationTarget) {
+    visibilityStylesEl.remove();
+    const currentScript = document.currentScript;
+    if (currentScript) {
+      currentScript.remove();
+    }
+  } else {
+    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
+    if (locale) {
+      attributes.locale = locale;
+    }
+    const winningVariantIndex = variants?.findIndex(function (variant) {
+      return (window as any).filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
+    });
+    if (winningVariantIndex !== -1) {
+      let newStyleStr = variants?.map((_, index) => {
+        if (index === winningVariantIndex) return '';
+        return `div[data-variant-id="${blockId}-${index}"] { display: none !important; } `;
+      }).join('') || '';
+      newStyleStr += `div[data-variant-id="${blockId}-default"] { display: none !important; } `;
+      visibilityStylesEl.innerHTML = newStyleStr;
+    }
+  }
+}
+export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export const FILTER_WITH_CUSTOM_TARGETING_SCRIPT = "function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {\n  function isString(val) {\n    return typeof val === 'string';\n  }\n  function isNumber(val) {\n    return typeof val === 'number';\n  }\n  function objectMatchesQuery(userattr, query) {\n    const result = (() => {\n      const property = query.property;\n      const operator = query.operator;\n      let testValue = query.value;\n      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {\n        testValue = query.value.slice(0, -1);\n      }\n      if (!(property && operator)) {\n        return true;\n      }\n      if (Array.isArray(testValue)) {\n        if (operator === 'isNot') {\n          return testValue.every(val => objectMatchesQuery(userattr, {\n            property,\n            operator,\n            value: val\n          }));\n        }\n        return !!testValue.find(val => objectMatchesQuery(userattr, {\n          property,\n          operator,\n          value: val\n        }));\n      }\n      const value = userattr[property];\n      if (Array.isArray(value)) {\n        return value.includes(testValue);\n      }\n      switch (operator) {\n        case 'is':\n          return value === testValue;\n        case 'isNot':\n          return value !== testValue;\n        case 'contains':\n          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));\n        case 'startsWith':\n          return isString(value) && value.startsWith(String(testValue));\n        case 'endsWith':\n          return isString(value) && value.endsWith(String(testValue));\n        case 'greaterThan':\n          return isNumber(value) && isNumber(testValue) && value > testValue;\n        case 'lessThan':\n          return isNumber(value) && isNumber(testValue) && value < testValue;\n        case 'greaterThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value >= testValue;\n        case 'lessThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value <= testValue;\n        default:\n          return false;\n      }\n    })();\n    return result;\n  }\n  const item = {\n    query,\n    startDate,\n    endDate\n  };\n  const now = userAttributes.date && new Date(userAttributes.date) || new Date();\n  if (item.startDate && new Date(item.startDate) > now) {\n    return false;\n  } else if (item.endDate && new Date(item.endDate) < now) {\n    return false;\n  }\n  if (!item.query || !item.query.length) {\n    return true;\n  }\n  return item.query.every(filter => {\n    return objectMatchesQuery(userAttributes, filter);\n  });\n}";
+export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/src/blocks/personalization-container/helpers.ts

@@ -2,8 +2,13 @@ import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
 import type { BuilderBlock } from '../../types/builder-block';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT } from './helpers/inlined-fns';
+import type { Target } from '../../types/targets';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 import type { PersonalizationContainerProps } from './personalization-container.types';
+export const DEFAULT_INDEX = 'default';
+const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
+const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
+const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
 export type UserAttributes = {
   date?: string | Date;
   urlPath?: string;
@@ -16,12 +21,33 @@ export type Query = {
   operator: QueryOperator;
   value: QueryValue;
 };
+type BlocksToRenderReturnType = {
+  blocks: BuilderBlock[];
+  path: string;
+  index: number | typeof DEFAULT_INDEX;
+};
+
+/**
+ * SDKs that support Variant Containers
+ */
+export const SDKS_SUPPORTING_PERSONALIZATION = (['react', 'vue', 'svelte', 'qwik'] as Target[]);
+
+/**
+ * After hydration, we reset the tree
+ * These SDKs handle Personalization Container in a special way:
+ * - first, the inlined script will help us add `display: none`, `aria-hidden: true` and `hidden: true` to the non-winning variants
+ * - then, on mount / when the component is hydrated - we reset the tree with only the winning variant and deleting the entire tree
+ *
+ * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
+ * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
+ */
+export const SDKS_REQUIRING_RESET_APPROACH = (['vue', 'svelte', 'qwik'] as Target[]);
 export function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean) {
   const hasVariants = variants && variants.length > 0;
   if (TARGET === 'reactNative') return false;
   if (!hasVariants) return false;
   if (!canTrack) return false;
-  if (TARGET === 'vue' || TARGET === 'svelte') return true;
+  if (SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) return true;
   if (isBrowser()) return false;
   return true;
 }
@@ -37,22 +63,23 @@ export function getBlocksToRender({
   isHydrated: boolean;
   filteredVariants: PersonalizationContainerProps['variants'];
   fallbackBlocks?: BuilderBlock[];
-}): {
-  blocks: BuilderBlock[];
-  path: string | undefined;
-} {
-  const fallback = {
+}): BlocksToRenderReturnType {
+  const fallback: BlocksToRenderReturnType = {
     blocks: fallbackBlocks ?? [],
-    path: 'this.children'
+    path: 'this.children',
+    index: DEFAULT_INDEX
   };
   if (isHydrated && isEditing()) {
     // If editing a specific variant
     if (typeof previewingIndex === 'number' && previewingIndex < (variants?.length ?? 0)) {
-      const variant = variants![previewingIndex];
-      return {
-        blocks: variant.blocks,
-        path: `component.options.variants.${previewingIndex}.blocks`
-      };
+      const variant = variants?.[previewingIndex];
+      if (variant) {
+        return {
+          blocks: variant.blocks,
+          path: `variants.${previewingIndex}.blocks`,
+          index: previewingIndex
+        };
+      }
     }
     // Otherwise we're editing the default variant
     return fallback;
@@ -61,24 +88,33 @@ export function getBlocksToRender({
   // If we're on the browser, check if there's a winning variant
   if (isBrowser()) {
     const winningVariant = filteredVariants?.[0];
-    if (winningVariant) {
-      return {
-        blocks: winningVariant.blocks,
-        path: `component.options.variants.${variants?.indexOf(winningVariant)}.blocks`
-      };
+    if (winningVariant && variants) {
+      const variantIndex = variants.indexOf(winningVariant);
+      if (variantIndex !== -1) {
+        return {
+          blocks: winningVariant.blocks,
+          path: `variants.${variantIndex}.blocks`,
+          index: variantIndex
+        };
+      }
     }
   }
 
   // If no winning variant or we are on the server, return the default variant
   return fallback;
 }
-export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+export const getInitPersonalizationVariantsFnsScriptString = () => {
   return `
-  (function() {
-    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
-    ${PERSONALIZATION_SCRIPT}
-    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ''})
-  })();
+  window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+  window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT}
   `;
 };
+const isHydrationTarget = TARGET === 'react';
+export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
+export const getUpdateVisibilityStylesScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
 export { filterWithCustomTargeting } from './helpers/inlined-fns'

package/src/blocks/personalization-container/personalization-container.tsx

@@ -16,17 +16,24 @@ import { useState, useRef, useEffect } from "react";
 import Blocks from "../../components/blocks/blocks";
 import InlinedScript from "../../components/inlined-script";
 import InlinedStyles from "../../components/inlined-styles";
+import { TARGET } from "../../constants/target";
+import { getClassPropName } from "../../functions/get-class-prop-name";
 import { isEditing } from "../../functions/is-editing";
 import { isPreviewing } from "../../functions/is-previewing";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
 import { userAttributesService } from "../../helpers/user-attributes";
+import { filterAttrs } from "../helpers";
 import {
   checkShouldRenderVariants,
+  DEFAULT_INDEX,
   filterWithCustomTargeting,
   getBlocksToRender,
   getPersonalizationScript,
+  getUpdateVisibilityStylesScript,
+  SDKS_REQUIRING_RESET_APPROACH,
 } from "./helpers";
 import type { PersonalizationContainerProps } from "./personalization-container.types";
+import { setAttrs } from "../helpers";
 
 function PersonalizationContainer(props: PersonalizationContainerProps) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -42,6 +49,15 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     )
   );
 
+  const [updateVisibilityStylesScript, setUpdateVisibilityStylesScript] =
+    useState(() =>
+      getUpdateVisibilityStylesScript(
+        props.variants,
+        props.builderBlock?.id || "none",
+        props.builderContext?.rootState?.locale as string | undefined
+      )
+    );
+
   const [unsubscribers, setUnsubscribers] = useState(() => []);
 
   const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
@@ -51,7 +67,17 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     )
   );
 
-  const [isHydrated, setIsHydrated] = useState(() => false);
+  const [shouldResetVariants, setShouldResetVariants] = useState(() => false);
+
+  function attrs() {
+    return {
+      ...props.attributes,
+      ...{},
+      [getClassPropName()]: `builder-personalization-container ${
+        props.attributes[getClassPropName()] || ""
+      }`,
+    };
+  }
 
   function filteredVariants() {
     return (props.variants || []).filter((variant) => {
@@ -75,7 +101,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     return getBlocksToRender({
       variants: props.variants,
       fallbackBlocks: props.builderBlock?.children,
-      isHydrated: isHydrated,
+      isHydrated: shouldResetVariants,
       filteredVariants: filteredVariants(),
       previewingIndex: props.previewingIndex,
     });
@@ -85,16 +111,19 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     return (props.variants || [])
       .map(
         (_, index) =>
-          `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `
+          `div[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none !important; } `
       )
       .join("");
   }
 
   useEffect(() => {
-    setIsHydrated(true);
+    setShouldResetVariants(true);
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs) => {
         setUserAttributes(attrs);
+      },
+      {
+        fireImmediately: TARGET === "qwik",
       }
     );
     if (!(isEditing() || isPreviewing())) {
@@ -103,7 +132,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
         rootRef.current.dispatchEvent(
           new CustomEvent("builder.variantLoaded", {
             detail: {
-              variant: variant || "default",
+              variant: variant || DEFAULT_INDEX,
               content: props.builderContext?.content,
             },
             bubbles: true,
@@ -115,7 +144,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
               rootRef.current.dispatchEvent(
                 new CustomEvent("builder.variantDisplayed", {
                   detail: {
-                    variant: variant || "default",
+                    variant: variant || DEFAULT_INDEX,
                     content: props.builderContext?.content,
                   },
                   bubbles: true,
@@ -137,38 +166,85 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
   }, []);
 
   return (
-    <View ref={rootRef} {...props.attributes}>
-      {shouldRenderVariants ? (
+    <View ref={rootRef} {...attrs()}>
+      {shouldResetVariants && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) ? (
+        <Blocks
+          blocks={blocksToRender().blocks}
+          parent={props.builderBlock?.id}
+          path={blocksToRender().path}
+          context={props.builderContext}
+          registeredComponents={props.builderComponents}
+          BlocksWrapperProps={{
+            ...props.builderContext?.BlocksWrapperProps,
+            "data-variant-id": `${props.builderBlock?.id}-${
+              blocksToRender().index
+            }`,
+          }}
+        />
+      ) : null}
+      {(!shouldResetVariants &&
+        SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) ||
+      !SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) ? (
         <>
-          {props.variants?.map((variant, index) => (
-            <View
-              key={index}
-              data-variant-id={`${props.builderBlock?.id}-${index}`}
-            >
-              <Blocks
-                blocks={variant.blocks}
-                parent={props.builderBlock?.id}
-                path={`component.options.variants.${index}.blocks`}
+          {shouldRenderVariants ? (
+            <>
+              <InlinedStyles
+                nonce={props.builderContext?.nonce || ""}
+                styles={hideVariantsStyleString()}
+                id={`variants-styles-${props.builderBlock?.id}`}
+              />
+              <InlinedScript
+                nonce={props.builderContext?.nonce || ""}
+                scriptStr={updateVisibilityStylesScript}
+                id={`variants-visibility-script-${props.builderBlock?.id}`}
+              />
+              {props.variants?.map((variant, index) => (
+                <Blocks
+                  key={`${props.builderBlock?.id}-${index}`}
+                  BlocksWrapperProps={{
+                    ...props.builderContext?.BlocksWrapperProps,
+                    "aria-hidden": true,
+                    hidden: true,
+                    "data-variant-id": `${props.builderBlock?.id}-${index}`,
+                  }}
+                  blocks={variant.blocks}
+                  parent={props.builderBlock?.id}
+                  path={`component.options.variants.${index}.blocks`}
+                  context={props.builderContext}
+                  registeredComponents={props.builderComponents}
+                >
+                  <InlinedScript
+                    nonce={props.builderContext?.nonce || ""}
+                    scriptStr={scriptStr}
+                    id={`variants-script-${props.builderBlock?.id}-${index}`}
+                  />
+                </Blocks>
+              ))}
+            </>
+          ) : null}
+          <Blocks
+            blocks={blocksToRender().blocks}
+            parent={props.builderBlock?.id}
+            path={blocksToRender().path}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
+            BlocksWrapperProps={{
+              ...props.builderContext?.BlocksWrapperProps,
+              "data-variant-id": `${props.builderBlock?.id}-${
+                blocksToRender().index
+              }`,
+            }}
+          >
+            {shouldRenderVariants ? (
+              <InlinedScript
+                nonce={props.builderContext?.nonce || ""}
+                scriptStr={scriptStr}
+                id={`variants-script-${props.builderBlock?.id}-${DEFAULT_INDEX}`}
               />
-            </View>
-          ))}
-          <InlinedStyles
-            nonce={props.builderContext?.nonce || ""}
-            styles={hideVariantsStyleString()}
-            id={`variants-styles-${props.builderBlock?.id}`}
-          />
-          <InlinedScript
-            nonce={props.builderContext?.nonce || ""}
-            scriptStr={scriptStr}
-            id={`variants-script-${props.builderBlock?.id}`}
-          />
+            ) : null}
+          </Blocks>
         </>
       ) : null}
-      <Blocks
-        blocks={blocksToRender().blocks}
-        parent={props.builderBlock?.id}
-        path={blocksToRender().path}
-      />
     </View>
   );
 }

package/src/blocks/personalization-container/personalization-container.types.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
-import type { BuilderDataProps } from '../../types/builder-props';
+import type { BuilderComponentsProp, BuilderDataProps } from '../../types/builder-props';
 import type { Query } from './helpers';
 export type PersonalizationContainerProps = {
   children?: any;
@@ -11,4 +11,4 @@ export type PersonalizationContainerProps = {
     startDate?: string;
     endDate?: string;
   }>;
-} & BuilderDataProps
+} & BuilderDataProps & BuilderComponentsProp

package/src/components/blocks/blocks-wrapper.tsx

@@ -24,7 +24,19 @@ export type BlocksWrapperProps = {
    */
   BlocksWrapper: any;
   /**
-   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   * Props to be applied to the wrapping element of blocks. Can be set in two ways:
+   * 1. Globally via `<Content blocksWrapperProps={{...}}/>` - applies to all blocks wrappers in the Content
+   * 2. Locally via `<Blocks BlocksWrapperProps={{...}}/>` - applies only to this specific blocks instance and overrides global props
+   *
+   * For merging both global and local props, spread the context props before adding your own:
+   * ```
+   * <Blocks
+   *   BlocksWrapperProps={{
+   *     ...builderContext.BlocksWrapperProps,
+   *     'data-test-id': 'my-test-id'
+   *   }}
+   * />
+   * ```
    */
   BlocksWrapperProps: any;
   children?: any;

package/src/components/blocks/blocks.tsx

@@ -54,14 +54,17 @@ function Blocks(props: BlocksProps) {
       parent={props.parent}
       path={props.path}
       styleProp={props.styleProp}
+      BlocksWrapperProps={
+        props.BlocksWrapperProps ||
+        props.context?.BlocksWrapperProps ||
+        builderContext?.BlocksWrapperProps
+      }
       classNameProp={props.className}
       BlocksWrapper={
         props.context?.BlocksWrapper || builderContext?.BlocksWrapper
       }
-      BlocksWrapperProps={
-        props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps
-      }
     >
+      {props.children}
       {props.blocks ? (
         <FlatList
           data={props.blocks}

package/src/components/blocks/blocks.types.ts

@@ -1,6 +1,6 @@
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'classNameProp'>> & {
   context?: BuilderContextInterface;
   registeredComponents?: RegisteredComponents;
   linkComponent?: any;

package/src/components/content-variants/content-variants.tsx

@@ -20,6 +20,10 @@ type VariantsProviderProps = ContentVariantsPrps & {
    */
   isNestedRender?: boolean;
 };
+import {
+  SDKS_SUPPORTING_PERSONALIZATION,
+  getInitPersonalizationVariantsFnsScriptString,
+} from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -79,11 +83,20 @@ function ContentVariants(props: VariantsProviderProps) {
   return (
     <>
       {!props.isNestedRender && TARGET !== "reactNative" ? (
-        <InlinedScript
-          id="builderio-init-variants-fns"
-          scriptStr={getInitVariantsFnsScriptString()}
-          nonce={props.nonce || ""}
-        />
+        <>
+          <InlinedScript
+            id="builderio-init-variants-fns"
+            scriptStr={getInitVariantsFnsScriptString()}
+            nonce={props.nonce || ""}
+          />
+          {SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? (
+            <InlinedScript
+              id="builderio-init-personalization-variants-fns"
+              nonce={props.nonce || ""}
+              scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+            />
+          ) : null}
+        </>
       ) : null}
       {shouldRenderVariants ? (
         <>

package/src/constants/builder-registered-components.ts

@@ -9,6 +9,7 @@ import { default as Fragment } from '../blocks/fragment/index';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info';
 import { default as Image } from '../blocks/image/index';
 import { componentInfo as personalizationContainerComponentInfo } from '../blocks/personalization-container/component-info';
+import { SDKS_SUPPORTING_PERSONALIZATION } from '../blocks/personalization-container/helpers';
 import { default as PersonalizationContainer } from '../blocks/personalization-container/index';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info';
 import { default as Section } from '../blocks/section/index';
@@ -52,7 +53,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Text,
   ...textComponentInfo
-}, ...(TARGET === 'react' ? [{
+}, ...(SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
   component: PersonalizationContainer,
   ...personalizationContainerComponentInfo
 }] : []), ...(TARGET === 'rsc' ? [] : [{

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.8"
+export const SDK_VERSION = "4.0.10"

package/src/helpers/no-serialize-wrapper.ts

@@ -0,0 +1,3 @@
+export function noSerializeWrapper(fn: () => void) {
+  return fn;
+}

package/src/helpers/user-attributes.ts

@@ -1,5 +1,7 @@
+import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
+import { noSerializeWrapper } from './no-serialize-wrapper';
 export interface UserAttributes {
   [key: string]: any;
 }
@@ -32,18 +34,34 @@ export function createUserAttributesService() {
         canTrack
       }) || '{}');
     },
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void) {
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, {
+      fireImmediately
+    }: {
+      fireImmediately?: boolean;
+    } = {}) {
       subscribers.add(callback);
-      return () => {
+      if (fireImmediately) {
+        callback(this.getUserAttributes());
+      }
+      return noSerializeWrapper(function () {
         subscribers.delete(callback);
-      };
+      });
     },
     setCanTrack(value: boolean) {
       canTrack = value;
     }
   };
 }
-export const userAttributesService = createUserAttributesService();
+let _userAttributesService: ReturnType<typeof createUserAttributesService>;
+if (isBrowser() && TARGET === 'qwik') {
+  if (!(window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__) {
+    (window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__ = createUserAttributesService();
+  }
+  _userAttributesService = (window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__;
+} else {
+  _userAttributesService = createUserAttributesService();
+}
+export const userAttributesService = _userAttributesService;
 export const setClientUserAttributes = (attributes: UserAttributes) => {
   userAttributesService.setUserAttributes(attributes);
 }