@builder.io/sdk-svelte 5.2.6 → 5.2.8

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

@@ -84,7 +84,7 @@ onMount(() => { });
     })}
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
-    alt={altText}
+    alt={altText || ""}
     {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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-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.6";
+export declare const SDK_VERSION = "5.2.8";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.6";
+export const SDK_VERSION = "5.2.8";

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

@@ -98,6 +98,20 @@ export interface ComponentInfo {
         query?: any;
     };
     friendlyName?: string;
+    /**
+     * Group custom components into their own accordion sections in the editor's insert menu.
+     * Components with the same `group` value are grouped together; components without a `group`
+     * (or with a blank value) fall back to the default "Custom Components" accordion.
+     *
+     * @example
+     * ```js
+     * Builder.registerComponent(MyStepComponent, {
+     *   name: 'Step',
+     *   group: 'Steps',
+     * })
+     * ```
+     */
+    group?: string;
     /**
      * Use to restrict access to your component based on a the current user permissions
      * By default components will show to all users

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

@@ -84,7 +84,7 @@ onMount(() => { });
     })}
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
-    alt={altText}
+    alt={altText || ""}
     {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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-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.6";
+export declare const SDK_VERSION = "5.2.8";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.6";
+export const SDK_VERSION = "5.2.8";

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

@@ -98,6 +98,20 @@ export interface ComponentInfo {
         query?: any;
     };
     friendlyName?: string;
+    /**
+     * Group custom components into their own accordion sections in the editor's insert menu.
+     * Components with the same `group` value are grouped together; components without a `group`
+     * (or with a blank value) fall back to the default "Custom Components" accordion.
+     *
+     * @example
+     * ```js
+     * Builder.registerComponent(MyStepComponent, {
+     *   name: 'Step',
+     *   group: 'Steps',
+     * })
+     * ```
+     */
+    group?: string;
     /**
      * Use to restrict access to your component based on a the current user permissions
      * By default components will show to all users

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

@@ -84,7 +84,7 @@ onMount(() => { });
     })}
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
-    alt={altText}
+    alt={altText || ""}
     {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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-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.6";
+export declare const SDK_VERSION = "5.2.8";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.2.6";
+export const SDK_VERSION = "5.2.8";

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

@@ -98,6 +98,20 @@ export interface ComponentInfo {
         query?: any;
     };
     friendlyName?: string;
+    /**
+     * Group custom components into their own accordion sections in the editor's insert menu.
+     * Components with the same `group` value are grouped together; components without a `group`
+     * (or with a blank value) fall back to the default "Custom Components" accordion.
+     *
+     * @example
+     * ```js
+     * Builder.registerComponent(MyStepComponent, {
+     *   name: 'Step',
+     *   group: 'Steps',
+     * })
+     * ```
+     */
+    group?: string;
     /**
      * Use to restrict access to your component based on a the current user permissions
      * By default components will show to all users

package/package.json

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

package/src/blocks/image/image.svelte

@@ -93,7 +93,7 @@
     })}
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
-    alt={altText}
+    alt={altText || ""}
     {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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-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.6"
+export const SDK_VERSION = "5.2.8"

package/src/types/components.ts

@@ -106,6 +106,21 @@ export interface ComponentInfo {
   };
   friendlyName?: string;
 
+  /**
+   * Group custom components into their own accordion sections in the editor's insert menu.
+   * Components with the same `group` value are grouped together; components without a `group`
+   * (or with a blank value) fall back to the default "Custom Components" accordion.
+   *
+   * @example
+   * ```js
+   * Builder.registerComponent(MyStepComponent, {
+   *   name: 'Step',
+   *   group: 'Steps',
+   * })
+   * ```
+   */
+  group?: string;
+
   /**
    * Use to restrict access to your component based on a the current user permissions
    * By default components will show to all users