@builder.io/sdk-svelte 3.0.3 → 3.0.6

package/lib/edge/types/components.d.ts

@@ -122,7 +122,7 @@ export interface ComponentInfo {
         /**
          * Whether or not the component should receive the `builderBlock` prop, containing the current Builder block being rendered.
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderBlock?: boolean;
         /**
@@ -130,7 +130,7 @@ export interface ComponentInfo {
          * The Builder Context contains a lot of data relevant to the current `Content` render.
          * You can see more information [here](https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/context/types.ts).
          *
-         * Defaults to `true`.
+         * Defaults to `false`.
          */
         builderContext?: boolean;
         /**

package/lib/edge/types/input.d.ts

@@ -124,6 +124,7 @@ export interface Input {
      * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
      */
     model?: string;
+    behavior?: string;
     valueType?: {
         type?: string;
     };

package/lib/node/blocks/columns/columns.svelte

@@ -170,13 +170,13 @@ $: flexDir = () => {
       ><Blocks
         path={`columns.${index}.blocks`}
         parent={builderBlock.id}
-        styleProp={{
-          flexGrow: "1",
-        }}
         context={builderContext}
         registeredComponents={builderComponents}
         linkComponent={builderLinkComponent}
         blocks={column.blocks}
+        styleProp={{
+          flexGrow: "1",
+        }}
       /></DynamicRenderer
     >
   {/each}

package/lib/node/blocks/form/form/form.svelte

@@ -3,8 +3,7 @@
  */
 </script>
 
-<script>import Block from "../../../components/block/block.svelte";
-import Blocks from "../../../components/blocks/blocks.svelte";
+<script>import Blocks from "../../../components/blocks/blocks.svelte";
 import { getEnv } from "../../../functions/get-env";
 import { get } from "../../../functions/get";
 import { isEditing } from "../../../functions/is-editing";
@@ -27,9 +26,6 @@ export let resetFormOnSubmit = undefined;
 export let successUrl = undefined;
 export let validate = undefined;
 export let attributes = undefined;
-export let builderBlock;
-export let builderComponents;
-export let builderLinkComponent = undefined;
 export let errorMessage = undefined;
 export let sendingMessage = undefined;
 export let successMessage = undefined;
@@ -254,16 +250,7 @@ let formErrorMessage = "";
   {...filterAttrs(attributes, "on:", false)}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
-  {#if builderBlock && builderBlock.children}
-    {#each builderBlock?.children as block, idx (`form-block-${idx}`)}
-      <Block
-        {block}
-        context={builderContext}
-        registeredComponents={builderComponents}
-        linkComponent={builderLinkComponent}
-      />
-    {/each}
-  {/if}
+  <slot />
   {#if submissionState() === "error"}
     <Blocks
       path="errorMessage"

package/lib/node/blocks/image/image.svelte

@@ -1,5 +1,4 @@
-<script>import { onMount } from "svelte";
-import { getSrcSet } from "./image.helpers";
+<script>import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -66,7 +65,6 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
-onMount(() => { });
 </script>
 
 <picture>

package/lib/node/blocks/personalization-container/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

package/lib/node/blocks/personalization-container/component-info.js

@@ -0,0 +1,36 @@
+export const componentInfo = {
+    name: 'PersonalizationContainer',
+    shouldReceiveBuilderProps: {
+        builderBlock: true,
+        builderContext: true
+    },
+    noWrap: true,
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a',
+    canHaveChildren: true,
+    inputs: [{
+            name: 'variants',
+            defaultValue: [],
+            behavior: 'personalizationVariantList',
+            type: 'list',
+            subFields: [{
+                    name: 'name',
+                    type: 'text'
+                }, {
+                    name: 'query',
+                    friendlyName: 'Targeting rules',
+                    type: 'BuilderQuery',
+                    defaultValue: []
+                }, {
+                    name: 'startDate',
+                    type: 'date'
+                }, {
+                    name: 'endDate',
+                    type: 'date'
+                }, {
+                    name: 'blocks',
+                    type: 'uiBlocks',
+                    hideFromUI: true,
+                    defaultValue: []
+                }]
+        }]
+};

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

@@ -0,0 +1,8 @@
+/**
+ * WARNING: This file contains functions that get stringified and inlined into the HTML at build-time.
+ * They cannot import anything.
+ */
+import type { Query, UserAttributes } from '../helpers';
+export declare function filterWithCustomTargeting(userAttributes: UserAttributes, query: Query[], startDate?: string, endDate?: string): boolean;
+export declare 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 declare 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}";

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

@@ -0,0 +1,87 @@
+/**
+ * WARNING: This file contains functions that get stringified and inlined into the HTML at build-time.
+ * They cannot import anything.
+ */
+import '../personalization-container.types';
+export function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
+    function isString(val) {
+        return typeof val === 'string';
+    }
+    function isNumber(val) {
+        return typeof val === 'number';
+    }
+    function objectMatchesQuery(userattr, query) {
+        const result = (() => {
+            const property = query.property;
+            const operator = query.operator;
+            let testValue = query.value;
+            if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {
+                testValue = query.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) || 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);
+    });
+}
+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}";

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

@@ -0,0 +1,27 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { PersonalizationContainerProps } from './personalization-container.types';
+export type UserAttributes = {
+    date?: string | Date;
+    urlPath?: string;
+    [key: string]: any;
+};
+type QueryOperator = 'is' | 'isNot' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqualTo' | 'lessThanOrEqualTo';
+type QueryValue = string | number | boolean | Array<string | number | boolean>;
+export type Query = {
+    property: string;
+    operator: QueryOperator;
+    value: QueryValue;
+};
+export declare function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean): boolean;
+export declare function getBlocksToRender({ variants, previewingIndex, isHydrated, filteredVariants, fallbackBlocks }: {
+    variants: PersonalizationContainerProps['variants'];
+    previewingIndex?: number | null;
+    isHydrated: boolean;
+    filteredVariants: PersonalizationContainerProps['variants'];
+    fallbackBlocks?: BuilderBlock[];
+}): {
+    blocks: BuilderBlock[];
+    path: string | undefined;
+};
+export declare const getPersonalizationScript: (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => string;
+export { filterWithCustomTargeting } from './helpers/inlined-fns';

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

@@ -0,0 +1,58 @@
+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';
+export 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;
+}
+export function getBlocksToRender({ variants, previewingIndex, isHydrated, filteredVariants, fallbackBlocks }) {
+    const fallback = {
+        blocks: fallbackBlocks ?? [],
+        path: 'this.children'
+    };
+    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`
+            };
+        }
+        // Otherwise we're editing the default variant
+        return fallback;
+    }
+    // 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 no winning variant or we are on the server, return the default variant
+    return fallback;
+}
+export const getPersonalizationScript = (variants, blockId, locale) => {
+    return `
+  (function() {
+    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+    ${PERSONALIZATION_SCRIPT}
+    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ''})
+  })();
+  `;
+};
+export { filterWithCustomTargeting } from './helpers/inlined-fns';

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

@@ -0,0 +1 @@
+export { default } from './personalization-container.svelte';

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

@@ -0,0 +1 @@
+export { default } from './personalization-container.svelte';

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

@@ -0,0 +1,118 @@
+<script>import { onDestroy, onMount } from "svelte";
+import Blocks from "../../components/blocks/blocks.svelte";
+import InlinedScript from "../../components/inlined-script.svelte";
+import InlinedStyles from "../../components/inlined-styles.svelte";
+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";
+export let builderContext;
+export let variants = undefined;
+export let builderBlock;
+export let previewingIndex = undefined;
+export let attributes = undefined;
+$: filteredVariants = () => {
+    return (variants || []).filter((variant) => {
+        return filterWithCustomTargeting({
+            ...($builderContext?.rootState?.locale
+                ? {
+                    locale: $builderContext?.rootState?.locale,
+                }
+                : {}),
+            ...userAttributes,
+        }, variant.query, variant.startDate, variant.endDate);
+    });
+};
+$: blocksToRender = () => {
+    return getBlocksToRender({
+        variants: variants,
+        fallbackBlocks: builderBlock?.children,
+        isHydrated: isHydrated,
+        filteredVariants: filteredVariants(),
+        previewingIndex: previewingIndex,
+    });
+};
+$: hideVariantsStyleString = () => {
+    return (variants || [])
+        .map((_, index) => `[data-variant-id="${builderBlock?.id}-${index}"] { display: none; } `)
+        .join("");
+};
+let rootRef;
+let userAttributes = userAttributesService.getUserAttributes();
+let scriptStr = getPersonalizationScript(variants, builderBlock?.id || "none", $builderContext?.rootState?.locale);
+let unsubscribers = [];
+let shouldRenderVariants = checkShouldRenderVariants(variants, getDefaultCanTrack($builderContext?.canTrack));
+let isHydrated = false;
+onMount(() => {
+    isHydrated = true;
+    const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs) => {
+        userAttributes = attrs;
+    });
+    if (!(isEditing() || isPreviewing())) {
+        const variant = filteredVariants()[0];
+        if (rootRef) {
+            rootRef.dispatchEvent(new CustomEvent("builder.variantLoaded", {
+                detail: {
+                    variant: variant || "default",
+                    content: $builderContext?.content,
+                },
+                bubbles: true,
+            }));
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting && rootRef) {
+                        rootRef.dispatchEvent(new CustomEvent("builder.variantDisplayed", {
+                            detail: {
+                                variant: variant || "default",
+                                content: $builderContext?.content,
+                            },
+                            bubbles: true,
+                        }));
+                    }
+                });
+            });
+            observer.observe(rootRef);
+        }
+    }
+    unsubscribers.push(unsub);
+});
+onDestroy(() => {
+    unsubscribers.forEach((unsub) => unsub());
+});
+</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
+          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}
+  />
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { PersonalizationContainerProps } from "./personalization-container.types";
+declare const __propDef: {
+    props: {
+        builderContext: PersonalizationContainerProps["builderContext"];
+        variants?: PersonalizationContainerProps["variants"];
+        builderBlock: PersonalizationContainerProps["builderBlock"];
+        previewingIndex?: PersonalizationContainerProps["previewingIndex"];
+        attributes?: PersonalizationContainerProps["attributes"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type PersonalizationContainerProps_ = typeof __propDef.props;
+export { PersonalizationContainerProps_ as PersonalizationContainerProps };
+export type PersonalizationContainerEvents = typeof __propDef.events;
+export type PersonalizationContainerSlots = typeof __propDef.slots;
+export default class PersonalizationContainer extends SvelteComponent<PersonalizationContainerProps, PersonalizationContainerEvents, PersonalizationContainerSlots> {
+}

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

@@ -0,0 +1,14 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderDataProps } from '../../types/builder-props';
+import type { Query } from './helpers';
+export type PersonalizationContainerProps = {
+    children?: any;
+    attributes?: any;
+    previewingIndex?: number | null;
+    variants?: Array<{
+        blocks: BuilderBlock[];
+        query: Query[];
+        startDate?: string;
+        endDate?: string;
+    }>;
+} & BuilderDataProps;

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

@@ -0,0 +1 @@
+export {};

package/lib/node/blocks/video/video.svelte

@@ -73,7 +73,6 @@ $: spreadProps = () => {
       objectPosition: position,
       // Hack to get object fit to work as expected and
       // not have the video overflow
-      zIndex: 2,
       borderRadius: "1px",
       ...(aspectRatio
         ? {

package/lib/node/components/blocks/blocks-wrapper.svelte

@@ -50,8 +50,13 @@ $: dataPath = () => {
     if (!path) {
         return undefined;
     }
+    const thisPrefix = "this.";
     const pathPrefix = "component.options.";
-    return path.startsWith(pathPrefix) ? path : `${pathPrefix}${path || ""}`;
+    return path.startsWith(thisPrefix)
+        ? path.replace(thisPrefix, "")
+        : path.startsWith(pathPrefix)
+            ? path
+            : `${pathPrefix}${path || ""}`;
 };
 let blocksWrapperRef;
 onMount(() => { });

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

@@ -8,6 +8,8 @@ import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/compo
 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 { 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';
 import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info';
@@ -48,7 +50,10 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Text,
         ...textComponentInfo
-    }, ...(TARGET === 'rsc' ? [] : [{
+    }, ...(TARGET === 'react' ? [{
+            component: PersonalizationContainer,
+            ...personalizationContainerComponentInfo
+        }] : []), ...(TARGET === 'rsc' ? [] : [{
             component: Tabs,
             ...tabsComponentInfo
         }, {

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.3";
+export declare const SDK_VERSION = "3.0.6";

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

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.3";
+export const SDK_VERSION = "3.0.6";

package/lib/node/helpers/canTrack.js

@@ -1,2 +1,7 @@
 import { checkIsDefined } from './nullable';
-export const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
+import { userAttributesService } from './user-attributes';
+export const getDefaultCanTrack = (canTrack) => {
+    const result = checkIsDefined(canTrack) ? canTrack : true;
+    userAttributesService.setCanTrack(result);
+    return result;
+};

package/lib/node/helpers/user-attributes.d.ts

@@ -0,0 +1,17 @@
+export interface UserAttributes {
+    [key: string]: any;
+}
+export declare const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
+export declare function createUserAttributesService(): {
+    setUserAttributes(newAttrs: UserAttributes): void;
+    getUserAttributes(): any;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    setCanTrack(value: boolean): void;
+};
+export declare const userAttributesService: {
+    setUserAttributes(newAttrs: UserAttributes): void;
+    getUserAttributes(): any;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    setCanTrack(value: boolean): void;
+};
+export declare const setClientUserAttributes: (attributes: UserAttributes) => void;

package/lib/node/helpers/user-attributes.js

@@ -0,0 +1,46 @@
+import { isBrowser } from '../functions/is-browser';
+import { getCookieSync, setCookie } from './cookie';
+export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
+export function createUserAttributesService() {
+    let canTrack = true;
+    const subscribers = new Set();
+    return {
+        setUserAttributes(newAttrs) {
+            if (!isBrowser()) {
+                return;
+            }
+            const userAttributes = {
+                ...this.getUserAttributes(),
+                ...newAttrs
+            };
+            setCookie({
+                name: USER_ATTRIBUTES_COOKIE_NAME,
+                value: JSON.stringify(userAttributes),
+                canTrack
+            });
+            subscribers.forEach(callback => callback(userAttributes));
+        },
+        getUserAttributes() {
+            if (!isBrowser()) {
+                return {};
+            }
+            return JSON.parse(getCookieSync({
+                name: USER_ATTRIBUTES_COOKIE_NAME,
+                canTrack
+            }) || '{}');
+        },
+        subscribeOnUserAttributesChange(callback) {
+            subscribers.add(callback);
+            return () => {
+                subscribers.delete(callback);
+            };
+        },
+        setCanTrack(value) {
+            canTrack = value;
+        }
+    };
+}
+export const userAttributesService = createUserAttributesService();
+export const setClientUserAttributes = (attributes) => {
+    userAttributesService.setUserAttributes(attributes);
+};

package/lib/node/index-helpers/blocks-exports.d.ts

@@ -12,3 +12,4 @@ export { default as Content } from '../components/content-variants/index';
  * Builder Context
  */
 export { BuilderContext } from '../context/index';
+export { setClientUserAttributes } from '../helpers/user-attributes';

package/lib/node/index-helpers/blocks-exports.js

@@ -12,3 +12,4 @@ export { default as Content } from '../components/content-variants/index';
  * Builder Context
  */
 export { BuilderContext } from '../context/index';
+export { setClientUserAttributes } from '../helpers/user-attributes';