@builder.io/sdk-solid 4.0.8 → 4.0.9

package/lib/browser/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, use, Dynamic, memo } from 'solid-js/web';
+import { delegateEvents, createComponent, memo, spread, mergeProps, insert, effect, setAttribute, className, style, template, use, Dynamic } from 'solid-js/web';
 import { createContext, useContext, Show, For, createMemo, onMount, createSignal, createEffect, on } from 'solid-js';
 
 // src/blocks/button/button.tsx
@@ -1659,7 +1659,7 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-023c60f2 {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-450facf4 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1708,7 +1708,7 @@ function BlocksWrapper(props) {
   createEffect(on(() => [onUpdateFn_0_props_blocks()], onUpdateFn_0));
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-023c60f2";
+      return className() + " dynamic-450facf4";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -1755,17 +1755,17 @@ function Blocks(props) {
     get styleProp() {
       return props.styleProp;
     },
+    get BlocksWrapperProps() {
+      return props.BlocksWrapperProps || props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
+    },
     get classNameProp() {
       return props.className;
     },
     get BlocksWrapper() {
       return props.context?.BlocksWrapper || builderContext?.BlocksWrapper;
     },
-    get BlocksWrapperProps() {
-      return props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps;
-    },
     get children() {
-      return createComponent(Show, {
+      return [memo(() => props.children), createComponent(Show, {
         get when() {
           return props.blocks;
         },
@@ -1794,7 +1794,7 @@ function Blocks(props) {
             }
           });
         }
-      });
+      })];
     }
   });
 }
@@ -2218,6 +2218,166 @@ function SectionComponent(props) {
 }
 var section_default = SectionComponent;
 
+// src/blocks/personalization-container/helpers/inlined-fns.ts
+function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
+  function isString(val) {
+    return typeof val === "string";
+  }
+  function isNumber(val) {
+    return typeof val === "number";
+  }
+  function objectMatchesQuery(userattr, query2) {
+    const result = (() => {
+      const property = query2.property;
+      const operator = query2.operator;
+      let testValue = query2.value;
+      if (query2 && query2.property === "urlPath" && query2.value && typeof query2.value === "string" && query2.value !== "/" && query2.value.endsWith("/")) {
+        testValue = query2.value.slice(0, -1);
+      }
+      if (!(property && operator)) {
+        return true;
+      }
+      if (Array.isArray(testValue)) {
+        if (operator === "isNot") {
+          return testValue.every((val) => objectMatchesQuery(userattr, {
+            property,
+            operator,
+            value: val
+          }));
+        }
+        return !!testValue.find((val) => objectMatchesQuery(userattr, {
+          property,
+          operator,
+          value: val
+        }));
+      }
+      const value = userattr[property];
+      if (Array.isArray(value)) {
+        return value.includes(testValue);
+      }
+      switch (operator) {
+        case "is":
+          return value === testValue;
+        case "isNot":
+          return value !== testValue;
+        case "contains":
+          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
+        case "startsWith":
+          return isString(value) && value.startsWith(String(testValue));
+        case "endsWith":
+          return isString(value) && value.endsWith(String(testValue));
+        case "greaterThan":
+          return isNumber(value) && isNumber(testValue) && value > testValue;
+        case "lessThan":
+          return isNumber(value) && isNumber(testValue) && value < testValue;
+        case "greaterThanOrEqualTo":
+          return isNumber(value) && isNumber(testValue) && value >= testValue;
+        case "lessThanOrEqualTo":
+          return isNumber(value) && isNumber(testValue) && value <= testValue;
+        default:
+          return false;
+      }
+    })();
+    return result;
+  }
+  const item = {
+    query,
+    startDate,
+    endDate
+  };
+  const now = userAttributes.date && new Date(userAttributes.date) || /* @__PURE__ */ new Date();
+  if (item.startDate && new Date(item.startDate) > now) {
+    return false;
+  } else if (item.endDate && new Date(item.endDate) < now) {
+    return false;
+  }
+  if (!item.query || !item.query.length) {
+    return true;
+  }
+  return item.query.every((filter) => {
+    return objectMatchesQuery(userAttributes, filter);
+  });
+}
+var 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}";
+var 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}";
+var 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}";
+
+// src/blocks/personalization-container/helpers.ts
+var DEFAULT_INDEX = "default";
+var FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = "filterWithCustomTargeting";
+var BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = "builderIoPersonalization";
+var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "updateVisibilityStylesScript";
+var SDKS_SUPPORTING_PERSONALIZATION = ["react", "vue", "svelte"];
+var SDKS_REQUIRING_RESET_APPROACH = ["vue", "svelte"];
+function checkShouldRenderVariants(variants, canTrack) {
+  const hasVariants = variants && variants.length > 0;
+  if (TARGET === "reactNative")
+    return false;
+  if (!hasVariants)
+    return false;
+  if (!canTrack)
+    return false;
+  if (SDKS_REQUIRING_RESET_APPROACH.includes(TARGET))
+    return true;
+  if (isBrowser())
+    return false;
+  return true;
+}
+function getBlocksToRender({
+  variants,
+  previewingIndex,
+  isHydrated,
+  filteredVariants,
+  fallbackBlocks
+}) {
+  const fallback = {
+    blocks: fallbackBlocks ?? [],
+    path: "this.children",
+    index: DEFAULT_INDEX
+  };
+  if (isHydrated && isEditing()) {
+    if (typeof previewingIndex === "number" && previewingIndex < (variants?.length ?? 0)) {
+      const variant = variants?.[previewingIndex];
+      if (variant) {
+        return {
+          blocks: variant.blocks,
+          path: `variants.${previewingIndex}.blocks`,
+          index: previewingIndex
+        };
+      }
+    }
+    return fallback;
+  }
+  if (isBrowser()) {
+    const winningVariant = filteredVariants?.[0];
+    if (winningVariant && variants) {
+      const variantIndex = variants.indexOf(winningVariant);
+      if (variantIndex !== -1) {
+        return {
+          blocks: winningVariant.blocks,
+          path: `variants.${variantIndex}.blocks`,
+          index: variantIndex
+        };
+      }
+    }
+  }
+  return fallback;
+}
+var getInitPersonalizationVariantsFnsScriptString = () => {
+  return `
+  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}
+  `;
+};
+var isHydrationTarget = TARGET === "react";
+var getPersonalizationScript = (variants, blockId, locale) => {
+  return `window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ""})`;
+};
+var getUpdateVisibilityStylesScript = (variants, blockId, locale) => {
+  return `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ""})`;
+};
+
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
   if (host === "localhost" || host === "127.0.0.1") {
@@ -3196,7 +3356,8 @@ var componentInfo6 = {
   name: "PersonalizationContainer",
   shouldReceiveBuilderProps: {
     builderBlock: true,
-    builderContext: true
+    builderContext: true,
+    builderComponents: true
   },
   noWrap: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a",
@@ -3258,208 +3419,22 @@ function isPreviewing(_search) {
   return Boolean(normalizedSearch.indexOf("builder.preview=") !== -1);
 }
 
-// src/blocks/personalization-container/helpers/inlined-fns.ts
-function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
-  function isString(val) {
-    return typeof val === "string";
-  }
-  function isNumber(val) {
-    return typeof val === "number";
-  }
-  function objectMatchesQuery(userattr, query2) {
-    const result = (() => {
-      const property = query2.property;
-      const operator = query2.operator;
-      let testValue = query2.value;
-      if (query2 && query2.property === "urlPath" && query2.value && typeof query2.value === "string" && query2.value !== "/" && query2.value.endsWith("/")) {
-        testValue = query2.value.slice(0, -1);
-      }
-      if (!(property && operator)) {
-        return true;
-      }
-      if (Array.isArray(testValue)) {
-        if (operator === "isNot") {
-          return testValue.every((val) => objectMatchesQuery(userattr, {
-            property,
-            operator,
-            value: val
-          }));
-        }
-        return !!testValue.find((val) => objectMatchesQuery(userattr, {
-          property,
-          operator,
-          value: val
-        }));
-      }
-      const value = userattr[property];
-      if (Array.isArray(value)) {
-        return value.includes(testValue);
-      }
-      switch (operator) {
-        case "is":
-          return value === testValue;
-        case "isNot":
-          return value !== testValue;
-        case "contains":
-          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
-        case "startsWith":
-          return isString(value) && value.startsWith(String(testValue));
-        case "endsWith":
-          return isString(value) && value.endsWith(String(testValue));
-        case "greaterThan":
-          return isNumber(value) && isNumber(testValue) && value > testValue;
-        case "lessThan":
-          return isNumber(value) && isNumber(testValue) && value < testValue;
-        case "greaterThanOrEqualTo":
-          return isNumber(value) && isNumber(testValue) && value >= testValue;
-        case "lessThanOrEqualTo":
-          return isNumber(value) && isNumber(testValue) && value <= testValue;
-        default:
-          return false;
-      }
-    })();
-    return result;
-  }
-  const item = {
-    query,
-    startDate,
-    endDate
-  };
-  const now = userAttributes.date && new Date(userAttributes.date) || /* @__PURE__ */ new Date();
-  if (item.startDate && new Date(item.startDate) > now) {
-    return false;
-  } else if (item.endDate && new Date(item.endDate) < now) {
-    return false;
-  }
-  if (!item.query || !item.query.length) {
-    return true;
-  }
-  return item.query.every((filter) => {
-    return objectMatchesQuery(userAttributes, filter);
-  });
-}
-var PERSONALIZATION_SCRIPT = `function getPersonalizedVariant(variants, blockId, locale) {
-  if (!navigator.cookieEnabled) {
-    return;
-  }
-  function getCookie(name) {
-    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;
-  }
-  function removeVariants() {
-    variants?.forEach(function (_, index) {
-      document.querySelector('template[data-variant-id="' + blockId + '-' + index + '"]')?.remove();
-    });
-    document.querySelector('script[data-id="variants-script-' + blockId + '"]')?.remove();
-    document.querySelector('style[data-id="variants-styles-' + blockId + '"]')?.remove();
-  }
-  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
-  if (locale) {
-    attributes.locale = locale;
-  }
-  const winningVariantIndex = variants?.findIndex(function (variant) {
-    return filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
-  });
-  const isDebug = location.href.includes('builder.debug=true');
-  if (isDebug) {
-    console.debug('PersonalizationContainer', {
-      attributes,
-      variants,
-      winningVariantIndex
-    });
-  }
-  if (winningVariantIndex !== -1) {
-    const winningVariant = document.querySelector('template[data-variant-id="' + blockId + '-' + winningVariantIndex + '"]');
-    if (winningVariant) {
-      const parentNode = winningVariant.parentNode;
-      if (parentNode) {
-        const newParent = parentNode.cloneNode(false);
-        newParent.appendChild(winningVariant.content.firstChild);
-        newParent.appendChild(winningVariant.content.lastChild);
-        parentNode.parentNode?.replaceChild(newParent, parentNode);
-      }
-      if (isDebug) {
-        console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);
-      }
-    }
-  } else if (variants && variants.length > 0) {
-    removeVariants();
-  }
-}`;
-var 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}";
-
-// src/blocks/personalization-container/helpers.ts
-function checkShouldRenderVariants(variants, canTrack) {
-  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 (isBrowser())
-    return false;
-  return true;
-}
-function getBlocksToRender({
-  variants,
-  previewingIndex,
-  isHydrated,
-  filteredVariants,
-  fallbackBlocks
-}) {
-  const fallback = {
-    blocks: fallbackBlocks ?? [],
-    path: "this.children"
-  };
-  if (isHydrated && isEditing()) {
-    if (typeof previewingIndex === "number" && previewingIndex < (variants?.length ?? 0)) {
-      const variant = variants[previewingIndex];
-      return {
-        blocks: variant.blocks,
-        path: `component.options.variants.${previewingIndex}.blocks`
-      };
-    }
-    return fallback;
-  }
-  if (isBrowser()) {
-    const winningVariant = filteredVariants?.[0];
-    if (winningVariant) {
-      return {
-        blocks: winningVariant.blocks,
-        path: `component.options.variants.${variants?.indexOf(winningVariant)}.blocks`
-      };
-    }
-  }
-  return fallback;
-}
-var getPersonalizationScript = (variants, blockId, locale) => {
-  return `
-  (function() {
-    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
-    ${PERSONALIZATION_SCRIPT}
-    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ""})
-  })();
-  `;
-};
-
 // src/blocks/personalization-container/personalization-container.tsx
 var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$25 = /* @__PURE__ */ template(`<template>`);
 function PersonalizationContainer(props) {
   const [userAttributes, setUserAttributes] = createSignal(userAttributesService.getUserAttributes());
   const [scriptStr, setScriptStr] = createSignal(getPersonalizationScript(props.variants, props.builderBlock?.id || "none", props.builderContext?.rootState?.locale));
+  const [updateVisibilityStylesScript, setUpdateVisibilityStylesScript] = createSignal(getUpdateVisibilityStylesScript(props.variants, props.builderBlock?.id || "none", props.builderContext?.rootState?.locale));
   const [unsubscribers, setUnsubscribers] = createSignal([]);
   const [shouldRenderVariants, setShouldRenderVariants] = createSignal(checkShouldRenderVariants(props.variants, getDefaultCanTrack(props.builderContext?.canTrack)));
-  const [isHydrated, setIsHydrated] = createSignal(false);
+  const [shouldResetVariants, setShouldResetVariants] = createSignal(false);
+  const attrs = createMemo(() => {
+    return {
+      ...props.attributes,
+      ...{},
+      [getClassPropName()]: `builder-personalization-container ${props.attributes[getClassPropName()] || ""}`
+    };
+  });
   const filteredVariants = createMemo(() => {
     return (props.variants || []).filter((variant) => {
       return filterWithCustomTargeting({
@@ -3474,26 +3449,26 @@ function PersonalizationContainer(props) {
     return getBlocksToRender({
       variants: props.variants,
       fallbackBlocks: props.builderBlock?.children,
-      isHydrated: isHydrated(),
+      isHydrated: shouldResetVariants(),
       filteredVariants: filteredVariants(),
       previewingIndex: props.previewingIndex
     });
   });
   const hideVariantsStyleString = createMemo(() => {
-    return (props.variants || []).map((_, index) => `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `).join("");
+    return (props.variants || []).map((_, index) => `div[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none !important; } `).join("");
   });
   let rootRef;
   onMount(() => {
-    setIsHydrated(true);
-    const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs) => {
-      setUserAttributes(attrs);
+    setShouldResetVariants(true);
+    const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs2) => {
+      setUserAttributes(attrs2);
     });
     if (!(isEditing() || isPreviewing())) {
       const variant = filteredVariants()[0];
       if (rootRef) {
         rootRef.dispatchEvent(new CustomEvent("builder.variantLoaded", {
           detail: {
-            variant: variant || "default",
+            variant: variant || DEFAULT_INDEX,
             content: props.builderContext?.content
           },
           bubbles: true
@@ -3503,7 +3478,7 @@ function PersonalizationContainer(props) {
             if (entry.isIntersecting && rootRef) {
               rootRef.dispatchEvent(new CustomEvent("builder.variantDisplayed", {
                 detail: {
-                  variant: variant || "default",
+                  variant: variant || DEFAULT_INDEX,
                   content: props.builderContext?.content
                 },
                 bubbles: true
@@ -3520,70 +3495,158 @@ function PersonalizationContainer(props) {
     const _el$ = _tmpl$9();
     const _ref$ = rootRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : rootRef = _el$;
-    spread(_el$, mergeProps({
-      get ["class"]() {
-        return `builder-personalization-container ${props.attributes?.className || ""}`;
-      }
-    }, () => props.attributes), false, true);
+    spread(_el$, mergeProps(attrs), false, true);
     insert(_el$, createComponent(Show, {
       get when() {
-        return shouldRenderVariants();
+        return memo(() => !!shouldResetVariants())() && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET);
       },
       get children() {
-        return [createComponent(For, {
-          get each() {
-            return props.variants;
+        return createComponent(blocks_default, {
+          get blocks() {
+            return blocksToRender().blocks;
           },
-          children: (variant, _index) => {
-            const index = _index();
-            return (() => {
-              const _el$2 = _tmpl$25();
-              setAttribute(_el$2, "key", index);
-              insert(_el$2, createComponent(blocks_default, {
-                get blocks() {
-                  return variant.blocks;
-                },
-                get parent() {
-                  return props.builderBlock?.id;
-                },
-                path: `component.options.variants.${index}.blocks`
-              }));
-              effect(() => setAttribute(_el$2, "data-variant-id", `${props.builderBlock?.id}-${index}`));
-              return _el$2;
-            })();
-          }
-        }), createComponent(inlined_styles_default, {
-          get nonce() {
-            return props.builderContext?.nonce || "";
+          get parent() {
+            return props.builderBlock?.id;
           },
-          get styles() {
-            return hideVariantsStyleString();
+          get path() {
+            return blocksToRender().path;
           },
-          get id() {
-            return `variants-styles-${props.builderBlock?.id}`;
-          }
-        }), createComponent(inlined_script_default, {
-          get nonce() {
-            return props.builderContext?.nonce || "";
+          get context() {
+            return props.builderContext;
           },
-          get scriptStr() {
-            return scriptStr();
+          get registeredComponents() {
+            return props.builderComponents;
           },
-          get id() {
-            return `variants-script-${props.builderBlock?.id}`;
+          get BlocksWrapperProps() {
+            return {
+              ...props.builderContext?.BlocksWrapperProps,
+              "data-variant-id": `${props.builderBlock?.id}-${blocksToRender().index}`
+            };
           }
-        })];
+        });
       }
     }), null);
-    insert(_el$, createComponent(blocks_default, {
-      get blocks() {
-        return blocksToRender().blocks;
-      },
-      get parent() {
-        return props.builderBlock?.id;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!!shouldResetVariants())() && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) || !SDKS_REQUIRING_RESET_APPROACH.includes(TARGET);
       },
-      get path() {
-        return blocksToRender().path;
+      get children() {
+        return [createComponent(Show, {
+          get when() {
+            return shouldRenderVariants();
+          },
+          get children() {
+            return [createComponent(inlined_styles_default, {
+              get nonce() {
+                return props.builderContext?.nonce || "";
+              },
+              get styles() {
+                return hideVariantsStyleString();
+              },
+              get id() {
+                return `variants-styles-${props.builderBlock?.id}`;
+              }
+            }), createComponent(inlined_script_default, {
+              get nonce() {
+                return props.builderContext?.nonce || "";
+              },
+              get scriptStr() {
+                return updateVisibilityStylesScript();
+              },
+              get id() {
+                return `variants-visibility-script-${props.builderBlock?.id}`;
+              }
+            }), createComponent(For, {
+              get each() {
+                return props.variants;
+              },
+              children: (variant, _index) => {
+                const index = _index();
+                return createComponent(blocks_default, {
+                  get key() {
+                    return `${props.builderBlock?.id}-${index}`;
+                  },
+                  get BlocksWrapperProps() {
+                    return {
+                      ...props.builderContext?.BlocksWrapperProps,
+                      "aria-hidden": true,
+                      hidden: true,
+                      "data-variant-id": `${props.builderBlock?.id}-${index}`
+                    };
+                  },
+                  get blocks() {
+                    return variant.blocks;
+                  },
+                  get parent() {
+                    return props.builderBlock?.id;
+                  },
+                  path: `component.options.variants.${index}.blocks`,
+                  get context() {
+                    return props.builderContext;
+                  },
+                  get registeredComponents() {
+                    return props.builderComponents;
+                  },
+                  get children() {
+                    return createComponent(inlined_script_default, {
+                      get nonce() {
+                        return props.builderContext?.nonce || "";
+                      },
+                      get scriptStr() {
+                        return scriptStr();
+                      },
+                      get id() {
+                        return `variants-script-${props.builderBlock?.id}-${index}`;
+                      }
+                    });
+                  }
+                });
+              }
+            })];
+          }
+        }), createComponent(blocks_default, {
+          get blocks() {
+            return blocksToRender().blocks;
+          },
+          get parent() {
+            return props.builderBlock?.id;
+          },
+          get path() {
+            return blocksToRender().path;
+          },
+          get context() {
+            return props.builderContext;
+          },
+          get registeredComponents() {
+            return props.builderComponents;
+          },
+          get BlocksWrapperProps() {
+            return {
+              ...props.builderContext?.BlocksWrapperProps,
+              "data-variant-id": `${props.builderBlock?.id}-${blocksToRender().index}`
+            };
+          },
+          get children() {
+            return createComponent(Show, {
+              get when() {
+                return shouldRenderVariants();
+              },
+              get children() {
+                return createComponent(inlined_script_default, {
+                  get nonce() {
+                    return props.builderContext?.nonce || "";
+                  },
+                  get scriptStr() {
+                    return scriptStr();
+                  },
+                  get id() {
+                    return `variants-script-${props.builderBlock?.id}-${DEFAULT_INDEX}`;
+                  }
+                });
+              }
+            });
+          }
+        })];
       }
     }), null);
     return _el$;
@@ -3870,7 +3933,7 @@ var componentInfo10 = {
   }
 };
 var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$26 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<div><div class=builder-tabs-wrap>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
 function Tabs(props) {
   const [activeTab, setActiveTab] = createSignal(props.defaultActiveTab ? props.defaultActiveTab - 1 : 0);
@@ -3885,7 +3948,7 @@ function Tabs(props) {
     }
   }
   return (() => {
-    const _el$ = _tmpl$26(), _el$2 = _el$.firstChild;
+    const _el$ = _tmpl$25(), _el$2 = _el$.firstChild;
     _el$2.style.setProperty("display", "flex");
     _el$2.style.setProperty("flex-direction", "row");
     _el$2.style.setProperty("overflow", "auto");
@@ -4417,7 +4480,7 @@ function logFetch(url) {
 
 // src/blocks/form/form/form.tsx
 var _tmpl$15 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-04a43b72">`);
-var _tmpl$27 = /* @__PURE__ */ template(`<form>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<form>`);
 var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-04a43b72 {
   padding: 10px;
   color: red;
@@ -4610,7 +4673,7 @@ function FormComponent(props) {
   }
   let formRef;
   return [(() => {
-    const _el$ = _tmpl$27();
+    const _el$ = _tmpl$26();
     _el$.addEventListener("submit", (event) => onSubmit(event));
     const _ref$ = formRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : formRef = _el$;
@@ -4822,7 +4885,7 @@ var componentInfo16 = {
   noWrap: true
 };
 var _tmpl$17 = /* @__PURE__ */ template(`<select>`);
-var _tmpl$28 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<option>`);
 function SelectComponent(props) {
   return (() => {
     const _el$ = _tmpl$17();
@@ -4850,7 +4913,7 @@ function SelectComponent(props) {
       children: (option, _index) => {
         const index = _index();
         return (() => {
-          const _el$2 = _tmpl$28();
+          const _el$2 = _tmpl$27();
           insert(_el$2, () => option.name || option.value);
           effect(() => setAttribute(_el$2, "key", `${option.name}-${index}`));
           effect(() => _el$2.value = option.value);
@@ -5094,7 +5157,7 @@ var componentInfo20 = {
   }
 };
 var _tmpl$21 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$29 = /* @__PURE__ */ template(`<div><video class=builder-video><source type=video/mp4>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div><video class=builder-video><source type=video/mp4>`);
 function Video(props) {
   const [lazyVideoObserver, setLazyVideoObserver] = createSignal(void 0);
   const videoProps = createMemo(() => {
@@ -5149,7 +5212,7 @@ function Video(props) {
     }
   });
   return (() => {
-    const _el$ = _tmpl$29(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    const _el$ = _tmpl$28(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
     _el$.style.setProperty("position", "relative");
     const _ref$ = videoRef;
     typeof _ref$ === "function" ? use(_ref$, _el$2) : videoRef = _el$2;
@@ -5286,7 +5349,7 @@ var getDefaultRegisteredComponents = () => [{
 }, {
   component: text_default,
   ...componentInfo11
-}, ...TARGET === "react" ? [{
+}, ...SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
   component: personalization_container_default,
   ...componentInfo6
 }] : [], ...TARGET === "rsc" ? [] : [{
@@ -5323,7 +5386,7 @@ var UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variant
 
 // src/components/content-variants/helpers.ts
 var UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = "builderIoAbTest";
-var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "builderIoRenderContent";
+var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME2 = "builderIoRenderContent";
 var getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
   ...variant,
   testVariationId: variant.id,
@@ -5348,20 +5411,20 @@ var checkShouldRenderVariants2 = ({
 };
 var getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 var isAngularSDK = TARGET === "angular";
-var isHydrationTarget = getIsHydrationTarget(TARGET);
+var isHydrationTarget2 = getIsHydrationTarget(TARGET);
 var getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
-  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME2} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
   `;
 var getUpdateCookieAndStylesScript = (variants, contentId) => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
-    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}, ${isAngularSDK}
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget2}, ${isAngularSDK}
   )`;
 var getUpdateVariantVisibilityScript = ({
   contentId,
   variationId
-}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
-    "${variationId}", "${contentId}", ${isHydrationTarget}
+}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME2}(
+    "${variationId}", "${contentId}", ${isHydrationTarget2}
   )`;
 
 // src/helpers/preview-lru-cache/get.ts
@@ -5370,7 +5433,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.8";
+var SDK_VERSION = "4.0.9";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -6786,7 +6849,7 @@ function ContentVariants(props) {
       return !props.isNestedRender && TARGET !== "reactNative";
     },
     get children() {
-      return createComponent(inlined_script_default, {
+      return [createComponent(inlined_script_default, {
         id: "builderio-init-variants-fns",
         get scriptStr() {
           return getInitVariantsFnsScriptString();
@@ -6794,7 +6857,22 @@ function ContentVariants(props) {
         get nonce() {
           return props.nonce || "";
         }
-      });
+      }), createComponent(Show, {
+        get when() {
+          return SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET);
+        },
+        get children() {
+          return createComponent(inlined_script_default, {
+            id: "builderio-init-personalization-variants-fns",
+            get nonce() {
+              return props.nonce || "";
+            },
+            get scriptStr() {
+              return getInitPersonalizationVariantsFnsScriptString();
+            }
+          });
+        }
+      })];
     }
   }), createComponent(Show, {
     get when() {
@@ -6982,7 +7060,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$30 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   const [symbolEntry, setSymbolEntry] = createSignal(props.symbol?.entry);
@@ -7016,7 +7094,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$30();
+    const _el$ = _tmpl$29();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();