@builder.io/sdk-svelte 5.2.5 → 5.2.7

package/lib/browser/blocks/image/component-info.js

@@ -102,7 +102,8 @@ export const componentInfo = {
         }, {
             name: 'sizes',
             type: 'string',
-            hideFromUI: true
+            advanced: true,
+            helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
         }, {
             name: 'srcset',
             type: 'string',

package/lib/browser/blocks/image/image.svelte

@@ -4,14 +4,14 @@ export let image;
 export let src = undefined;
 export let srcset = undefined;
 export let noWebp = undefined;
-export let aspectRatio = undefined;
+export let sizes = undefined;
 export let highPriority = undefined;
+export let aspectRatio = undefined;
 export let altText = undefined;
 export let title = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
 export let className = undefined;
-export let sizes = undefined;
 export let builderBlock = undefined;
 export let fitContent = undefined;
 function stringifyStyles(stylesObj) {
@@ -56,6 +56,9 @@ $: webpSrcSet = () => {
         return "";
     }
 };
+$: sizesToUse = () => {
+    return sizes || (highPriority ? undefined : "auto");
+};
 $: aspectRatioCss = () => {
     const aspectRatioStyles = {
         position: "absolute",
@@ -72,7 +75,7 @@ onMount(() => { });
 
 <picture>
   {#if webpSrcSet()}
-    <source type="image/webp" srcset={webpSrcSet()} />
+    <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
       objectPosition: backgroundPosition || "center",
@@ -87,7 +90,7 @@ onMount(() => { });
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}
-    {sizes}
+    sizes={sizesToUse()}
   /></picture
 >
 

package/lib/browser/blocks/image/image.svelte.d.ts

@@ -6,14 +6,14 @@ declare const __propDef: {
         src?: ImageProps["src"];
         srcset?: ImageProps["srcset"];
         noWebp?: ImageProps["noWebp"];
-        aspectRatio?: ImageProps["aspectRatio"];
+        sizes?: ImageProps["sizes"];
         highPriority?: ImageProps["highPriority"];
+        aspectRatio?: ImageProps["aspectRatio"];
         altText?: ImageProps["altText"];
         title?: ImageProps["title"];
         backgroundPosition?: ImageProps["backgroundPosition"];
         backgroundSize?: ImageProps["backgroundSize"];
         className?: ImageProps["className"];
-        sizes?: ImageProps["sizes"];
         builderBlock?: ImageProps["builderBlock"];
         fitContent?: ImageProps["fitContent"];
     };

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

@@ -1,4 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderContent } from '../../types/builder-content';
 import type { Target } from '../../types/targets';
 import type { PersonalizationContainerProps } from './personalization-container.types';
 export declare const DEFAULT_INDEX = "default";
@@ -41,6 +42,7 @@ export declare function getBlocksToRender({ variants, previewingIndex, isHydrate
     filteredVariants: PersonalizationContainerProps['variants'];
     fallbackBlocks?: BuilderBlock[];
 }): BlocksToRenderReturnType;
+export declare const hasPersonalizationContainer: (content: BuilderContent | null | undefined) => boolean;
 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;

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

@@ -6,6 +6,7 @@ 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';
+const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 /**
  * SDKs that support Variant Containers
  */
@@ -72,11 +73,37 @@ export function getBlocksToRender({ variants, previewingIndex, isHydrated, filte
     // If no winning variant or we are on the server, return the default variant
     return fallback;
 }
+/**
+ * Walks the whole content rather than a known set of paths. A/B variation blocks live on
+ * `variations[*].data.blocks`, a sibling of `data.blocks`, and containers can sit inside columns,
+ * tabs, slots or inlined symbols. A missed container leaves the inlined fns undefined at parse
+ * time, so every variant renders at once.
+ */
+const containsPersonalizationContainer = (value) => {
+    if (Array.isArray(value)) {
+        return value.some(containsPersonalizationContainer);
+    }
+    if (!value || typeof value !== 'object')
+        return false;
+    if (value.component?.name === PERSONALIZATION_CONTAINER_COMPONENT_NAME) {
+        return true;
+    }
+    return Object.values(value).some(containsPersonalizationContainer);
+};
+export const hasPersonalizationContainer = (content) => containsPersonalizationContainer(content);
 export const 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}
+  (function() {
+    if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
+      window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
+    }
+    if (!window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}) {
+      window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT};
+    }
+    if (!window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}) {
+      window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT};
+    }
+  })();
   `;
 };
 const isHydrationTarget = TARGET === 'react';

package/lib/browser/components/content/components/enable-editor.svelte

@@ -281,6 +281,7 @@ let hasExecuted = false;
 let contextValue = $builderContextSignal;
 let prevData = null;
 let prevLocale = "";
+let prevContent = null;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
 let httpReqsPending = {};

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

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, } from "../../blocks/personalization-container/helpers";
+import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, hasPersonalizationContainer, } from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -11,9 +11,9 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
 export let content;
-export let isNestedRender = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
+export let isNestedRender = undefined;
 export let model;
 export let data = undefined;
 export let context = undefined;
@@ -54,6 +54,7 @@ let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
+let shouldEmitPersonalizationFns = TARGET !== "reactNative" && hasPersonalizationContainer(content);
 onMount(() => {
     /**
      * For Solid/Svelte: we unmount the non-winning variants post-hydration.
@@ -62,7 +63,7 @@ onMount(() => {
 });
 </script>
 
-{#if !isNestedRender && TARGET !== "reactNative"}
+{#if shouldEmitPersonalizationFns}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"

package/lib/browser/components/content-variants/content-variants.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content: VariantsProviderProps["content"];
-        isNestedRender?: VariantsProviderProps["isNestedRender"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
+        isNestedRender?: VariantsProviderProps["isNestedRender"];
         model: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.5";
+export declare const SDK_VERSION = "5.2.7";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.5";
+export const SDK_VERSION = "5.2.7";

package/lib/edge/blocks/image/component-info.js

@@ -102,7 +102,8 @@ export const componentInfo = {
         }, {
             name: 'sizes',
             type: 'string',
-            hideFromUI: true
+            advanced: true,
+            helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
         }, {
             name: 'srcset',
             type: 'string',

package/lib/edge/blocks/image/image.svelte

@@ -4,14 +4,14 @@ export let image;
 export let src = undefined;
 export let srcset = undefined;
 export let noWebp = undefined;
-export let aspectRatio = undefined;
+export let sizes = undefined;
 export let highPriority = undefined;
+export let aspectRatio = undefined;
 export let altText = undefined;
 export let title = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
 export let className = undefined;
-export let sizes = undefined;
 export let builderBlock = undefined;
 export let fitContent = undefined;
 function stringifyStyles(stylesObj) {
@@ -56,6 +56,9 @@ $: webpSrcSet = () => {
         return "";
     }
 };
+$: sizesToUse = () => {
+    return sizes || (highPriority ? undefined : "auto");
+};
 $: aspectRatioCss = () => {
     const aspectRatioStyles = {
         position: "absolute",
@@ -72,7 +75,7 @@ onMount(() => { });
 
 <picture>
   {#if webpSrcSet()}
-    <source type="image/webp" srcset={webpSrcSet()} />
+    <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
       objectPosition: backgroundPosition || "center",
@@ -87,7 +90,7 @@ onMount(() => { });
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}
-    {sizes}
+    sizes={sizesToUse()}
   /></picture
 >
 

package/lib/edge/blocks/image/image.svelte.d.ts

@@ -6,14 +6,14 @@ declare const __propDef: {
         src?: ImageProps["src"];
         srcset?: ImageProps["srcset"];
         noWebp?: ImageProps["noWebp"];
-        aspectRatio?: ImageProps["aspectRatio"];
+        sizes?: ImageProps["sizes"];
         highPriority?: ImageProps["highPriority"];
+        aspectRatio?: ImageProps["aspectRatio"];
         altText?: ImageProps["altText"];
         title?: ImageProps["title"];
         backgroundPosition?: ImageProps["backgroundPosition"];
         backgroundSize?: ImageProps["backgroundSize"];
         className?: ImageProps["className"];
-        sizes?: ImageProps["sizes"];
         builderBlock?: ImageProps["builderBlock"];
         fitContent?: ImageProps["fitContent"];
     };

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

@@ -1,4 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderContent } from '../../types/builder-content';
 import type { Target } from '../../types/targets';
 import type { PersonalizationContainerProps } from './personalization-container.types';
 export declare const DEFAULT_INDEX = "default";
@@ -41,6 +42,7 @@ export declare function getBlocksToRender({ variants, previewingIndex, isHydrate
     filteredVariants: PersonalizationContainerProps['variants'];
     fallbackBlocks?: BuilderBlock[];
 }): BlocksToRenderReturnType;
+export declare const hasPersonalizationContainer: (content: BuilderContent | null | undefined) => boolean;
 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;

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

@@ -6,6 +6,7 @@ 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';
+const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 /**
  * SDKs that support Variant Containers
  */
@@ -72,11 +73,37 @@ export function getBlocksToRender({ variants, previewingIndex, isHydrated, filte
     // If no winning variant or we are on the server, return the default variant
     return fallback;
 }
+/**
+ * Walks the whole content rather than a known set of paths. A/B variation blocks live on
+ * `variations[*].data.blocks`, a sibling of `data.blocks`, and containers can sit inside columns,
+ * tabs, slots or inlined symbols. A missed container leaves the inlined fns undefined at parse
+ * time, so every variant renders at once.
+ */
+const containsPersonalizationContainer = (value) => {
+    if (Array.isArray(value)) {
+        return value.some(containsPersonalizationContainer);
+    }
+    if (!value || typeof value !== 'object')
+        return false;
+    if (value.component?.name === PERSONALIZATION_CONTAINER_COMPONENT_NAME) {
+        return true;
+    }
+    return Object.values(value).some(containsPersonalizationContainer);
+};
+export const hasPersonalizationContainer = (content) => containsPersonalizationContainer(content);
 export const 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}
+  (function() {
+    if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
+      window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
+    }
+    if (!window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}) {
+      window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT};
+    }
+    if (!window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}) {
+      window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT};
+    }
+  })();
   `;
 };
 const isHydrationTarget = TARGET === 'react';

package/lib/edge/components/content/components/enable-editor.svelte

@@ -281,6 +281,7 @@ let hasExecuted = false;
 let contextValue = $builderContextSignal;
 let prevData = null;
 let prevLocale = "";
+let prevContent = null;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
 let httpReqsPending = {};

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

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, } from "../../blocks/personalization-container/helpers";
+import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, hasPersonalizationContainer, } from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -11,9 +11,9 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
 export let content;
-export let isNestedRender = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
+export let isNestedRender = undefined;
 export let model;
 export let data = undefined;
 export let context = undefined;
@@ -54,6 +54,7 @@ let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
+let shouldEmitPersonalizationFns = TARGET !== "reactNative" && hasPersonalizationContainer(content);
 onMount(() => {
     /**
      * For Solid/Svelte: we unmount the non-winning variants post-hydration.
@@ -62,7 +63,7 @@ onMount(() => {
 });
 </script>
 
-{#if !isNestedRender && TARGET !== "reactNative"}
+{#if shouldEmitPersonalizationFns}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"

package/lib/edge/components/content-variants/content-variants.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content: VariantsProviderProps["content"];
-        isNestedRender?: VariantsProviderProps["isNestedRender"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
+        isNestedRender?: VariantsProviderProps["isNestedRender"];
         model: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.5";
+export declare const SDK_VERSION = "5.2.7";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.5";
+export const SDK_VERSION = "5.2.7";

package/lib/node/blocks/image/component-info.js

@@ -102,7 +102,8 @@ export const componentInfo = {
         }, {
             name: 'sizes',
             type: 'string',
-            hideFromUI: true
+            advanced: true,
+            helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
         }, {
             name: 'srcset',
             type: 'string',

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

@@ -4,14 +4,14 @@ export let image;
 export let src = undefined;
 export let srcset = undefined;
 export let noWebp = undefined;
-export let aspectRatio = undefined;
+export let sizes = undefined;
 export let highPriority = undefined;
+export let aspectRatio = undefined;
 export let altText = undefined;
 export let title = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
 export let className = undefined;
-export let sizes = undefined;
 export let builderBlock = undefined;
 export let fitContent = undefined;
 function stringifyStyles(stylesObj) {
@@ -56,6 +56,9 @@ $: webpSrcSet = () => {
         return "";
     }
 };
+$: sizesToUse = () => {
+    return sizes || (highPriority ? undefined : "auto");
+};
 $: aspectRatioCss = () => {
     const aspectRatioStyles = {
         position: "absolute",
@@ -72,7 +75,7 @@ onMount(() => { });
 
 <picture>
   {#if webpSrcSet()}
-    <source type="image/webp" srcset={webpSrcSet()} />
+    <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
       objectPosition: backgroundPosition || "center",
@@ -87,7 +90,7 @@ onMount(() => { });
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}
-    {sizes}
+    sizes={sizesToUse()}
   /></picture
 >
 

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

@@ -6,14 +6,14 @@ declare const __propDef: {
         src?: ImageProps["src"];
         srcset?: ImageProps["srcset"];
         noWebp?: ImageProps["noWebp"];
-        aspectRatio?: ImageProps["aspectRatio"];
+        sizes?: ImageProps["sizes"];
         highPriority?: ImageProps["highPriority"];
+        aspectRatio?: ImageProps["aspectRatio"];
         altText?: ImageProps["altText"];
         title?: ImageProps["title"];
         backgroundPosition?: ImageProps["backgroundPosition"];
         backgroundSize?: ImageProps["backgroundSize"];
         className?: ImageProps["className"];
-        sizes?: ImageProps["sizes"];
         builderBlock?: ImageProps["builderBlock"];
         fitContent?: ImageProps["fitContent"];
     };

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

@@ -1,4 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderContent } from '../../types/builder-content';
 import type { Target } from '../../types/targets';
 import type { PersonalizationContainerProps } from './personalization-container.types';
 export declare const DEFAULT_INDEX = "default";
@@ -41,6 +42,7 @@ export declare function getBlocksToRender({ variants, previewingIndex, isHydrate
     filteredVariants: PersonalizationContainerProps['variants'];
     fallbackBlocks?: BuilderBlock[];
 }): BlocksToRenderReturnType;
+export declare const hasPersonalizationContainer: (content: BuilderContent | null | undefined) => boolean;
 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;

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

@@ -6,6 +6,7 @@ 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';
+const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 /**
  * SDKs that support Variant Containers
  */
@@ -72,11 +73,37 @@ export function getBlocksToRender({ variants, previewingIndex, isHydrated, filte
     // If no winning variant or we are on the server, return the default variant
     return fallback;
 }
+/**
+ * Walks the whole content rather than a known set of paths. A/B variation blocks live on
+ * `variations[*].data.blocks`, a sibling of `data.blocks`, and containers can sit inside columns,
+ * tabs, slots or inlined symbols. A missed container leaves the inlined fns undefined at parse
+ * time, so every variant renders at once.
+ */
+const containsPersonalizationContainer = (value) => {
+    if (Array.isArray(value)) {
+        return value.some(containsPersonalizationContainer);
+    }
+    if (!value || typeof value !== 'object')
+        return false;
+    if (value.component?.name === PERSONALIZATION_CONTAINER_COMPONENT_NAME) {
+        return true;
+    }
+    return Object.values(value).some(containsPersonalizationContainer);
+};
+export const hasPersonalizationContainer = (content) => containsPersonalizationContainer(content);
 export const 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}
+  (function() {
+    if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
+      window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
+    }
+    if (!window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}) {
+      window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT};
+    }
+    if (!window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}) {
+      window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT};
+    }
+  })();
   `;
 };
 const isHydrationTarget = TARGET === 'react';

package/lib/node/components/content/components/enable-editor.svelte

@@ -281,6 +281,7 @@ let hasExecuted = false;
 let contextValue = $builderContextSignal;
 let prevData = null;
 let prevLocale = "";
+let prevContent = null;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
 let httpReqsPending = {};

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

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, } from "../../blocks/personalization-container/helpers";
+import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, hasPersonalizationContainer, } from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -11,9 +11,9 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
 export let content;
-export let isNestedRender = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
+export let isNestedRender = undefined;
 export let model;
 export let data = undefined;
 export let context = undefined;
@@ -54,6 +54,7 @@ let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
+let shouldEmitPersonalizationFns = TARGET !== "reactNative" && hasPersonalizationContainer(content);
 onMount(() => {
     /**
      * For Solid/Svelte: we unmount the non-winning variants post-hydration.
@@ -62,7 +63,7 @@ onMount(() => {
 });
 </script>
 
-{#if !isNestedRender && TARGET !== "reactNative"}
+{#if shouldEmitPersonalizationFns}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"

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

@@ -10,9 +10,9 @@ declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content: VariantsProviderProps["content"];
-        isNestedRender?: VariantsProviderProps["isNestedRender"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
+        isNestedRender?: VariantsProviderProps["isNestedRender"];
         model: VariantsProviderProps["model"];
         data?: VariantsProviderProps["data"];
         context?: VariantsProviderProps["context"];

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.2.5";
+export declare const SDK_VERSION = "5.2.7";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.5";
+export const SDK_VERSION = "5.2.7";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "5.2.5",
+  "version": "5.2.7",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/image/component-info.ts

@@ -104,7 +104,8 @@ export const componentInfo: ComponentInfo = {
   }, {
     name: 'sizes',
     type: 'string',
-    hideFromUI: true
+    advanced: true,
+    helperText: 'The sizes attribute for responsive images, e.g. "(max-width: 600px) 100vw, 50vw"'
   }, {
     name: 'srcset',
     type: 'string',

package/src/blocks/image/image.svelte

@@ -8,14 +8,14 @@
   export let src: ImageProps["src"] = undefined;
   export let srcset: ImageProps["srcset"] = undefined;
   export let noWebp: ImageProps["noWebp"] = undefined;
-  export let aspectRatio: ImageProps["aspectRatio"] = undefined;
+  export let sizes: ImageProps["sizes"] = undefined;
   export let highPriority: ImageProps["highPriority"] = undefined;
+  export let aspectRatio: ImageProps["aspectRatio"] = undefined;
   export let altText: ImageProps["altText"] = undefined;
   export let title: ImageProps["title"] = undefined;
   export let backgroundPosition: ImageProps["backgroundPosition"] = undefined;
   export let backgroundSize: ImageProps["backgroundSize"] = undefined;
   export let className: ImageProps["className"] = undefined;
-  export let sizes: ImageProps["sizes"] = undefined;
   export let builderBlock: ImageProps["builderBlock"] = undefined;
   export let fitContent: ImageProps["fitContent"] = undefined;
 
@@ -64,6 +64,9 @@
       return "";
     }
   };
+  $: sizesToUse = () => {
+    return sizes || (highPriority ? undefined : "auto");
+  };
   $: aspectRatioCss = () => {
     const aspectRatioStyles = {
       position: "absolute",
@@ -81,7 +84,7 @@
 
 <picture>
   {#if webpSrcSet()}
-    <source type="image/webp" srcset={webpSrcSet()} />
+    <source type="image/webp" srcset={webpSrcSet()} sizes={sizesToUse()} />
   {/if}<img
     style={stringifyStyles({
       objectPosition: backgroundPosition || "center",
@@ -96,7 +99,7 @@
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}
     srcset={srcSetToUse()}
-    {sizes}
+    sizes={sizesToUse()}
   /></picture
 >
 

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

@@ -2,6 +2,7 @@ import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
 import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderContent } from '../../types/builder-content';
 import type { Target } from '../../types/targets';
 import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 import type { PersonalizationContainerProps } from './personalization-container.types';
@@ -9,6 +10,7 @@ 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';
+const PERSONALIZATION_CONTAINER_COMPONENT_NAME = 'PersonalizationContainer';
 export type UserAttributes = {
   date?: string | Date;
   urlPath?: string;
@@ -103,11 +105,37 @@ export function getBlocksToRender({
   // If no winning variant or we are on the server, return the default variant
   return fallback;
 }
+
+/**
+ * Walks the whole content rather than a known set of paths. A/B variation blocks live on
+ * `variations[*].data.blocks`, a sibling of `data.blocks`, and containers can sit inside columns,
+ * tabs, slots or inlined symbols. A missed container leaves the inlined fns undefined at parse
+ * time, so every variant renders at once.
+ */
+const containsPersonalizationContainer = (value: unknown): boolean => {
+  if (Array.isArray(value)) {
+    return value.some(containsPersonalizationContainer);
+  }
+  if (!value || typeof value !== 'object') return false;
+  if ((value as BuilderBlock).component?.name === PERSONALIZATION_CONTAINER_COMPONENT_NAME) {
+    return true;
+  }
+  return Object.values(value).some(containsPersonalizationContainer);
+};
+export const hasPersonalizationContainer = (content: BuilderContent | null | undefined) => containsPersonalizationContainer(content);
 export const 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}
+  (function() {
+    if (!window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME}) {
+      window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT};
+    }
+    if (!window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}) {
+      window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT};
+    }
+    if (!window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}) {
+      window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT};
+    }
+  })();
   `;
 };
 const isHydrationTarget = TARGET === 'react';

package/src/components/content/components/enable-editor.svelte

@@ -367,6 +367,7 @@
   let contextValue = $builderContextSignal;
   let prevData = null;
   let prevLocale = "";
+  let prevContent = null;
   let ContentWrapper = contentWrapper || "div";
   let httpReqsData = {};
   let httpReqsPending = {};

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

@@ -13,6 +13,7 @@
   import {
     SDKS_SUPPORTING_PERSONALIZATION,
     getInitPersonalizationVariantsFnsScriptString,
+    hasPersonalizationContainer,
   } from "../../blocks/personalization-container/helpers";
   import { TARGET } from "../../constants/target";
   import { handleABTestingSync } from "../../helpers/ab-tests";
@@ -30,10 +31,10 @@
 
   export let canTrack: VariantsProviderProps["canTrack"] = undefined;
   export let content: VariantsProviderProps["content"];
-  export let isNestedRender: VariantsProviderProps["isNestedRender"] =
-    undefined;
   export let nonce: VariantsProviderProps["nonce"] = undefined;
   export let apiHost: VariantsProviderProps["apiHost"] = undefined;
+  export let isNestedRender: VariantsProviderProps["isNestedRender"] =
+    undefined;
   export let model: VariantsProviderProps["model"];
   export let data: VariantsProviderProps["data"] = undefined;
   export let context: VariantsProviderProps["context"] = undefined;
@@ -83,6 +84,8 @@
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
   });
+  let shouldEmitPersonalizationFns =
+    TARGET !== "reactNative" && hasPersonalizationContainer(content);
 
   onMount(() => {
     /**
@@ -92,7 +95,7 @@
   });
 </script>
 
-{#if !isNestedRender && TARGET !== "reactNative"}
+{#if shouldEmitPersonalizationFns}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.5"
+export const SDK_VERSION = "5.2.7"