@builder.io/sdk-svelte 4.0.8 → 4.0.9

package/lib/node/blocks/personalization-container/helpers/inlined-fns.js

@@ -83,5 +83,49 @@ export function filterWithCustomTargeting(userAttributes, query, startDate, endD
         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 function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {
+    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;
+    }
+    const visibilityStylesEl = document.currentScript?.previousElementSibling;
+    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.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/lib/node/blocks/personalization-container/helpers.d.ts

@@ -1,5 +1,7 @@
 import type { BuilderBlock } from '../../types/builder-block';
+import type { Target } from '../../types/targets';
 import type { PersonalizationContainerProps } from './personalization-container.types';
+export declare const DEFAULT_INDEX = "default";
 export type UserAttributes = {
     date?: string | Date;
     urlPath?: string;
@@ -12,6 +14,25 @@ export type Query = {
     operator: QueryOperator;
     value: QueryValue;
 };
+type BlocksToRenderReturnType = {
+    blocks: BuilderBlock[];
+    path: string;
+    index: number | typeof DEFAULT_INDEX;
+};
+/**
+ * SDKs that support Variant Containers
+ */
+export declare const SDKS_SUPPORTING_PERSONALIZATION: 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 declare const SDKS_REQUIRING_RESET_APPROACH: Target[];
 export declare function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean): boolean;
 export declare function getBlocksToRender({ variants, previewingIndex, isHydrated, filteredVariants, fallbackBlocks }: {
     variants: PersonalizationContainerProps['variants'];
@@ -19,9 +40,8 @@ export declare function getBlocksToRender({ variants, previewingIndex, isHydrate
     isHydrated: boolean;
     filteredVariants: PersonalizationContainerProps['variants'];
     fallbackBlocks?: BuilderBlock[];
-}): {
-    blocks: BuilderBlock[];
-    path: string | undefined;
-};
+}): BlocksToRenderReturnType;
+export declare const getInitPersonalizationVariantsFnsScriptString: () => string;
 export declare const getPersonalizationScript: (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => string;
+export declare const getUpdateVisibilityStylesScript: (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => string;
 export { filterWithCustomTargeting } from './helpers/inlined-fns';

package/lib/node/blocks/personalization-container/helpers.js

@@ -1,7 +1,25 @@
 import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT } from './helpers/inlined-fns';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
+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';
+/**
+ * SDKs that support Variant Containers
+ */
+export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'];
+/**
+ * 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'];
 export function checkShouldRenderVariants(variants, canTrack) {
     const hasVariants = variants && variants.length > 0;
     if (TARGET === 'reactNative')
@@ -10,7 +28,7 @@ export function checkShouldRenderVariants(variants, canTrack) {
         return false;
     if (!canTrack)
         return false;
-    if (TARGET === 'vue' || TARGET === 'svelte')
+    if (SDKS_REQUIRING_RESET_APPROACH.includes(TARGET))
         return true;
     if (isBrowser())
         return false;
@@ -19,16 +37,20 @@ export function checkShouldRenderVariants(variants, canTrack) {
 export function getBlocksToRender({ variants, previewingIndex, isHydrated, filteredVariants, fallbackBlocks }) {
     const fallback = {
         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;
@@ -36,23 +58,32 @@ export function getBlocksToRender({ variants, previewingIndex, isHydrated, filte
     // 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, blockId, locale) => {
+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, blockId, locale) => {
+    return `window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
+export const getUpdateVisibilityStylesScript = (variants, blockId, locale) => {
+    return `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
 export { filterWithCustomTargeting } from './helpers/inlined-fns';

package/lib/node/blocks/personalization-container/personalization-container.svelte

@@ -2,16 +2,28 @@
 import Blocks from "../../components/blocks/blocks.svelte";
 import InlinedScript from "../../components/inlined-script.svelte";
 import InlinedStyles from "../../components/inlined-styles.svelte";
+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 { checkShouldRenderVariants, filterWithCustomTargeting, getBlocksToRender, getPersonalizationScript, } from "./helpers";
+import { filterAttrs } from "../helpers";
+import { checkShouldRenderVariants, DEFAULT_INDEX, filterWithCustomTargeting, getBlocksToRender, getPersonalizationScript, getUpdateVisibilityStylesScript, SDKS_REQUIRING_RESET_APPROACH, } from "./helpers";
+import "../helpers";
 export let builderContext;
 export let variants = undefined;
 export let builderBlock;
-export let previewingIndex = undefined;
 export let attributes = undefined;
+export let previewingIndex = undefined;
+export let builderComponents;
+$: attrs = () => {
+    return {
+        ...filterAttrs(attributes, "on:", false),
+        ...filterAttrs(attributes, "on:", true),
+        [getClassPropName()]: `builder-personalization-container ${attributes[getClassPropName()] || ""}`,
+    };
+};
 $: filteredVariants = () => {
     return (variants || []).filter((variant) => {
         return filterWithCustomTargeting({
@@ -28,24 +40,25 @@ $: blocksToRender = () => {
     return getBlocksToRender({
         variants: variants,
         fallbackBlocks: builderBlock?.children,
-        isHydrated: isHydrated,
+        isHydrated: shouldResetVariants,
         filteredVariants: filteredVariants(),
         previewingIndex: previewingIndex,
     });
 };
 $: hideVariantsStyleString = () => {
     return (variants || [])
-        .map((_, index) => `[data-variant-id="${builderBlock?.id}-${index}"] { display: none; } `)
+        .map((_, index) => `div[data-variant-id="${builderBlock?.id}-${index}"] { display: none !important; } `)
         .join("");
 };
 let rootRef;
 let userAttributes = userAttributesService.getUserAttributes();
 let scriptStr = getPersonalizationScript(variants, builderBlock?.id || "none", $builderContext?.rootState?.locale);
+let updateVisibilityStylesScript = getUpdateVisibilityStylesScript(variants, builderBlock?.id || "none", $builderContext?.rootState?.locale);
 let unsubscribers = [];
 let shouldRenderVariants = checkShouldRenderVariants(variants, getDefaultCanTrack($builderContext?.canTrack));
-let isHydrated = false;
+let shouldResetVariants = false;
 onMount(() => {
-    isHydrated = true;
+    shouldResetVariants = true;
     const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs) => {
         userAttributes = attrs;
     });
@@ -54,7 +67,7 @@ onMount(() => {
         if (rootRef) {
             rootRef.dispatchEvent(new CustomEvent("builder.variantLoaded", {
                 detail: {
-                    variant: variant || "default",
+                    variant: variant || DEFAULT_INDEX,
                     content: $builderContext?.content,
                 },
                 bubbles: true,
@@ -64,7 +77,7 @@ onMount(() => {
                     if (entry.isIntersecting && rootRef) {
                         rootRef.dispatchEvent(new CustomEvent("builder.variantDisplayed", {
                             detail: {
-                                variant: variant || "default",
+                                variant: variant || DEFAULT_INDEX,
                                 content: $builderContext?.content,
                             },
                             bubbles: true,
@@ -82,37 +95,72 @@ onDestroy(() => {
 });
 </script>
 
-<div
-  bind:this={rootRef}
-  {...attributes}
-  class={`builder-personalization-container ${attributes?.className || ""}`}
->
-  {#if shouldRenderVariants}
-    {#each variants as variant, index (index)}
-      <svelte:element
-        this={"template"}
-        data-variant-id={`${builderBlock?.id}-${index}`}
-        ><Blocks
+<div bind:this={rootRef} {...attrs()}>
+  {#if shouldResetVariants && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)}
+    <Blocks
+      blocks={blocksToRender().blocks}
+      parent={builderBlock?.id}
+      path={blocksToRender().path}
+      context={builderContext}
+      registeredComponents={builderComponents}
+      BlocksWrapperProps={{
+        ...$builderContext?.BlocksWrapperProps,
+        "data-variant-id": `${builderBlock?.id}-${blocksToRender().index}`,
+      }}
+    />
+  {/if}
+  {#if (!shouldResetVariants && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) || !SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)}
+    {#if shouldRenderVariants}
+      <InlinedStyles
+        nonce={$builderContext?.nonce || ""}
+        styles={hideVariantsStyleString()}
+        id={`variants-styles-${builderBlock?.id}`}
+      />
+      <InlinedScript
+        nonce={$builderContext?.nonce || ""}
+        scriptStr={updateVisibilityStylesScript}
+        id={`variants-visibility-script-${builderBlock?.id}`}
+      />
+
+      {#each variants as variant, index (`${builderBlock?.id}-${index}`)}
+        <Blocks
+          BlocksWrapperProps={{
+            ...$builderContext?.BlocksWrapperProps,
+            "aria-hidden": true,
+            hidden: true,
+            "data-variant-id": `${builderBlock?.id}-${index}`,
+          }}
           blocks={variant.blocks}
           parent={builderBlock?.id}
           path={`component.options.variants.${index}.blocks`}
-        /></svelte:element
-      >
-    {/each}
-
-    <InlinedStyles
-      nonce={$builderContext?.nonce || ""}
-      styles={hideVariantsStyleString()}
-      id={`variants-styles-${builderBlock?.id}`}
-    />
-    <InlinedScript
-      nonce={$builderContext?.nonce || ""}
-      {scriptStr}
-      id={`variants-script-${builderBlock?.id}`}
-    />
-  {/if}<Blocks
-    blocks={blocksToRender().blocks}
-    parent={builderBlock?.id}
-    path={blocksToRender().path}
-  />
+          context={builderContext}
+          registeredComponents={builderComponents}
+          ><InlinedScript
+            nonce={$builderContext?.nonce || ""}
+            {scriptStr}
+            id={`variants-script-${builderBlock?.id}-${index}`}
+          /></Blocks
+        >
+      {/each}
+    {/if}
+    <Blocks
+      blocks={blocksToRender().blocks}
+      parent={builderBlock?.id}
+      path={blocksToRender().path}
+      context={builderContext}
+      registeredComponents={builderComponents}
+      BlocksWrapperProps={{
+        ...$builderContext?.BlocksWrapperProps,
+        "data-variant-id": `${builderBlock?.id}-${blocksToRender().index}`,
+      }}
+    >
+      {#if shouldRenderVariants}
+        <InlinedScript
+          nonce={$builderContext?.nonce || ""}
+          {scriptStr}
+          id={`variants-script-${builderBlock?.id}-${DEFAULT_INDEX}`}
+        />
+      {/if}</Blocks
+    >
+  {/if}
 </div>

package/lib/node/blocks/personalization-container/personalization-container.svelte.d.ts

@@ -5,8 +5,9 @@ declare const __propDef: {
         builderContext: PersonalizationContainerProps["builderContext"];
         variants?: PersonalizationContainerProps["variants"];
         builderBlock: PersonalizationContainerProps["builderBlock"];
-        previewingIndex?: PersonalizationContainerProps["previewingIndex"];
         attributes?: PersonalizationContainerProps["attributes"];
+        previewingIndex?: PersonalizationContainerProps["previewingIndex"];
+        builderComponents: PersonalizationContainerProps["builderComponents"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/blocks/personalization-container/personalization-container.types.d.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/lib/node/components/blocks/blocks.svelte

@@ -7,8 +7,9 @@ export let blocks;
 export let parent;
 export let path;
 export let styleProp;
-export let className = undefined;
+export let BlocksWrapperProps;
 export let context = undefined;
+export let className = undefined;
 export let linkComponent = undefined;
 export let registeredComponents = undefined;
 let builderContext = getContext(BuilderContext.key);
@@ -20,11 +21,12 @@ let componentsContext = getContext(ComponentsContext.key);
   {parent}
   {path}
   {styleProp}
+  BlocksWrapperProps={BlocksWrapperProps ||
+    $context?.BlocksWrapperProps ||
+    $builderContext?.BlocksWrapperProps}
   classNameProp={className}
   BlocksWrapper={$context?.BlocksWrapper || $builderContext?.BlocksWrapper}
-  BlocksWrapperProps={$context?.BlocksWrapperProps ||
-    $builderContext?.BlocksWrapperProps}
->
+  ><slot />
   {#if blocks}
     {#each blocks as block (block.id)}
       <Block

package/lib/node/components/blocks/blocks.svelte.d.ts

@@ -6,15 +6,18 @@ declare const __propDef: {
         parent: BlocksProps["parent"];
         path: BlocksProps["path"];
         styleProp: BlocksProps["styleProp"];
-        className?: BlocksProps["className"];
+        BlocksWrapperProps: BlocksProps["BlocksWrapperProps"];
         context?: BlocksProps["context"];
+        className?: BlocksProps["className"];
         linkComponent?: BlocksProps["linkComponent"];
         registeredComponents?: BlocksProps["registeredComponents"];
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 type BlocksProps_ = typeof __propDef.props;
 export { BlocksProps_ as BlocksProps };

package/lib/node/components/blocks/blocks.types.d.ts

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

package/lib/node/components/content-variants/content-variants.svelte

@@ -1,6 +1,7 @@
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
+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";
@@ -67,6 +68,14 @@ onMount(() => {
     scriptStr={getInitVariantsFnsScriptString()}
     nonce={nonce || ""}
   />
+
+  {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
+    <InlinedScript
+      id="builderio-init-personalization-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+    />
+  {/if}
 {/if}
 
 {#if shouldRenderVariants}

package/lib/node/constants/builder-registered-components.js

@@ -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';
@@ -50,7 +51,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Text,
         ...textComponentInfo
-    }, ...(TARGET === 'react' ? [{
+    }, ...(SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
             component: PersonalizationContainer,
             ...personalizationContainerComponentInfo
         }] : []), ...(TARGET === 'rsc' ? [] : [{

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.0.8";
+export declare const SDK_VERSION = "4.0.9";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.8";
+export const SDK_VERSION = "4.0.9";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "type": "module",
   "files": [
     "lib",
@@ -60,7 +60,7 @@
     "svelte-preprocess": "^5.0.4",
     "tslib": "^2.3.1",
     "typescript": "^5.1.6",
-    "vite": "^4.5.6"
+    "vite": "^4.5.11"
   },
   "nx": {
     "targets": {

package/src/blocks/personalization-container/component-info.ts

@@ -3,7 +3,8 @@ export const componentInfo: ComponentInfo = {
   name: 'PersonalizationContainer',
   shouldReceiveBuilderProps: {
     builderBlock: true,
-    builderContext: true
+    builderContext: true,
+    builderComponents: true
   },
   noWrap: true,
   image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a',

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}";