@builder.io/sdk-svelte 5.3.0 → 5.4.0

package/lib/browser/blocks/symbol/symbol.helpers.d.ts

@@ -10,6 +10,7 @@ export interface SymbolInfo {
     ownerId?: string;
     global?: boolean;
 }
+export declare const isSymbolContentInlinedInParent: (symbol: SymbolInfo | undefined, bindings: Record<string, string> | undefined) => boolean;
 export declare const fetchSymbolContent: ({ builderContextValue, symbol }: {
     symbol: SymbolInfo | undefined;
     builderContextValue: BuilderContextInterface;

package/lib/browser/blocks/symbol/symbol.helpers.js

@@ -1,5 +1,11 @@
 import { fetchOneEntry } from '../../functions/get-content/index';
 import { logger } from '../../helpers/logger';
+const isSymbolContentBinding = (key) => {
+    const path = key.startsWith('component.') ? key.slice(10) : key;
+    return path === 'options.symbol' || path === 'options.symbol.content' || path.startsWith('options.symbol.content.');
+};
+// Bound symbol content is evaluated at render time, so it is not in the parent content JSON.
+export const isSymbolContentInlinedInParent = (symbol, bindings) => !!symbol?.content && !Object.keys(bindings || {}).some(isSymbolContentBinding);
 export const fetchSymbolContent = async ({ builderContextValue, symbol }) => {
     /**
      * If:

package/lib/browser/blocks/symbol/symbol.svelte

@@ -4,7 +4,7 @@ import { filterAttrs } from "../helpers";
 import "../../components/dynamic-div.svelte";
 import { getClassPropName } from "../../functions/get-class-prop-name";
 import { setAttrs } from "../helpers";
-import { fetchSymbolContent } from "./symbol.helpers";
+import { fetchSymbolContent, isSymbolContentInlinedInParent, } from "./symbol.helpers";
 export let symbol = undefined;
 export let builderComponents;
 export let attributes = undefined;
@@ -64,6 +64,10 @@ $: onUpdateFn_0(...[symbol]);
   <ContentVariants
     nonce={$builderContext.nonce}
     isNestedRender={true}
+    isContentInlinedInParent={isSymbolContentInlinedInParent(
+      symbol,
+      builderBlock?.bindings
+    )}
     apiVersion={$builderContext.apiVersion}
     apiKey={symbol?.global && symbol?.ownerId
       ? symbol.ownerId

package/lib/browser/components/builder-scripts.svelte

@@ -0,0 +1,39 @@
+<script context="module">/**
+ * Emits the Variant Container and A/B test helper scripts once for all `Content` components inside it.
+ */
+</script>
+
+<script>import { getContext, setContext } from "svelte";
+import { getInitPersonalizationVariantsFnsScriptString, SDKS_SUPPORTING_PERSONALIZATION, } from "../blocks/personalization-container/helpers";
+import { TARGET } from "../constants/target";
+import BuilderScriptsContext from "../context/builder-scripts.context";
+import { isBrowser } from "../functions/is-browser";
+import { getInitVariantsFnsScriptString, SDKS_SUPPORTING_BUILDER_SCRIPTS, } from "./content-variants/helpers";
+import InlinedScript from "./inlined-script.svelte";
+export let nonce = undefined;
+let parentScriptsContext = getContext(BuilderScriptsContext.key);
+let isSupported = SDKS_SUPPORTING_BUILDER_SCRIPTS.includes(TARGET);
+let shouldRenderAbTestFns = TARGET !== "react" || !isBrowser();
+setContext(BuilderScriptsContext.key, {
+    scriptsEmitted: isSupported,
+});
+</script>
+
+{#if isSupported && !parentScriptsContext?.scriptsEmitted}
+  {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
+    <InlinedScript
+      id="builderio-init-personalization-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+    />
+  {/if}
+
+  {#if shouldRenderAbTestFns}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitVariantsFnsScriptString()}
+    />
+  {/if}
+{/if}
+<slot />

package/lib/browser/components/builder-scripts.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+type BuilderScriptsProps = {
+    nonce?: string;
+    children?: any;
+};
+declare const __propDef: {
+    props: {
+        nonce?: BuilderScriptsProps["nonce"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type BuilderScriptsProps_ = typeof __propDef.props;
+export { BuilderScriptsProps_ as BuilderScriptsProps };
+export type BuilderScriptsEvents = typeof __propDef.events;
+export type BuilderScriptsSlots = typeof __propDef.slots;
+export default class BuilderScripts extends SvelteComponent<BuilderScriptsProps, BuilderScriptsEvents, BuilderScriptsSlots> {
+}

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

@@ -1,8 +1,9 @@
 <script context="module"></script>
 
-<script>import { onMount } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, hasPersonalizationContainer, } from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
+import BuilderScriptsContext from "../../context/builder-scripts.context";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
 import ContentComponent from "../content/content.svelte";
@@ -11,6 +12,7 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
 export let content;
+export let isContentInlinedInParent = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
 export let isNestedRender = undefined;
@@ -29,6 +31,7 @@ export let blocksWrapperProps = undefined;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
 export let trustedHosts = undefined;
+let scriptsContext = getContext(BuilderScriptsContext.key);
 $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
         id: value.testVariationId,
@@ -55,7 +58,9 @@ let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
-let shouldEmitPersonalizationFns = TARGET !== "reactNative" && hasPersonalizationContainer(content);
+let shouldEmitPersonalizationFns = TARGET !== "reactNative" &&
+    !isContentInlinedInParent &&
+    hasPersonalizationContainer(content);
 onMount(() => {
     /**
      * For Solid/Svelte: we unmount the non-winning variants post-hydration.
@@ -64,7 +69,7 @@ onMount(() => {
 });
 </script>
 
-{#if shouldEmitPersonalizationFns}
+{#if shouldEmitPersonalizationFns && !!!scriptsContext?.scriptsEmitted}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"
@@ -75,11 +80,13 @@ onMount(() => {
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedScript
-    id="builderio-init-variants-fns"
-    scriptStr={getInitVariantsFnsScriptString()}
-    nonce={nonce || ""}
-  />
+  {#if !!!scriptsContext?.scriptsEmitted}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      scriptStr={getInitVariantsFnsScriptString()}
+      nonce={nonce || ""}
+    />
+  {/if}
   <InlinedStyles
     id="builderio-variants"
     styles={hideVariantsStyleString()}

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

@@ -4,12 +4,17 @@ type VariantsProviderProps = ContentVariantsPrps & {
      * For internal use only. Do not provide this prop.
      */
     isNestedRender?: boolean;
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isContentInlinedInParent?: boolean;
 };
 import type { ContentVariantsPrps } from "./content-variants.types";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content: VariantsProviderProps["content"];
+        isContentInlinedInParent?: VariantsProviderProps["isContentInlinedInParent"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
         isNestedRender?: VariantsProviderProps["isNestedRender"];

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

@@ -1,5 +1,11 @@
 import type { Nullable } from '../../helpers/nullable';
 import type { BuilderContent } from '../../types/builder-content';
+import type { Target } from '../../types/targets';
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export declare const SDKS_SUPPORTING_BUILDER_SCRIPTS: Target[];
 export declare const getVariants: (content: Nullable<BuilderContent>) => {
     testVariationId: string | undefined;
     id: string | undefined;

package/lib/browser/components/content-variants/helpers.js

@@ -9,6 +9,11 @@ import { UPDATE_COOKIES_AND_STYLES_SCRIPT, UPDATE_VARIANT_VISIBILITY_SCRIPT } fr
  */
 const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = 'builderIoAbTest';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'builderIoRenderContent';
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export const SDKS_SUPPORTING_BUILDER_SCRIPTS = ['react', 'vue', 'svelte', 'solid', 'qwik'];
 export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
     ...variant,
     testVariationId: variant.id,

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.3.0";
+export declare const SDK_VERSION = "5.4.0";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.3.0";
+export const SDK_VERSION = "5.4.0";

package/lib/browser/context/builder-scripts.context.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    BuilderScripts: {
+        scriptsEmitted: boolean;
+    };
+    key: symbol;
+};
+export default _default;

package/lib/browser/context/builder-scripts.context.js

@@ -0,0 +1,5 @@
+const key = Symbol();
+export default {
+    BuilderScripts: { scriptsEmitted: false },
+    key,
+};

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

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

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

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

package/lib/edge/blocks/symbol/symbol.helpers.d.ts

@@ -10,6 +10,7 @@ export interface SymbolInfo {
     ownerId?: string;
     global?: boolean;
 }
+export declare const isSymbolContentInlinedInParent: (symbol: SymbolInfo | undefined, bindings: Record<string, string> | undefined) => boolean;
 export declare const fetchSymbolContent: ({ builderContextValue, symbol }: {
     symbol: SymbolInfo | undefined;
     builderContextValue: BuilderContextInterface;

package/lib/edge/blocks/symbol/symbol.helpers.js

@@ -1,5 +1,11 @@
 import { fetchOneEntry } from '../../functions/get-content/index';
 import { logger } from '../../helpers/logger';
+const isSymbolContentBinding = (key) => {
+    const path = key.startsWith('component.') ? key.slice(10) : key;
+    return path === 'options.symbol' || path === 'options.symbol.content' || path.startsWith('options.symbol.content.');
+};
+// Bound symbol content is evaluated at render time, so it is not in the parent content JSON.
+export const isSymbolContentInlinedInParent = (symbol, bindings) => !!symbol?.content && !Object.keys(bindings || {}).some(isSymbolContentBinding);
 export const fetchSymbolContent = async ({ builderContextValue, symbol }) => {
     /**
      * If:

package/lib/edge/blocks/symbol/symbol.svelte

@@ -4,7 +4,7 @@ import { filterAttrs } from "../helpers";
 import "../../components/dynamic-div.svelte";
 import { getClassPropName } from "../../functions/get-class-prop-name";
 import { setAttrs } from "../helpers";
-import { fetchSymbolContent } from "./symbol.helpers";
+import { fetchSymbolContent, isSymbolContentInlinedInParent, } from "./symbol.helpers";
 export let symbol = undefined;
 export let builderComponents;
 export let attributes = undefined;
@@ -64,6 +64,10 @@ $: onUpdateFn_0(...[symbol]);
   <ContentVariants
     nonce={$builderContext.nonce}
     isNestedRender={true}
+    isContentInlinedInParent={isSymbolContentInlinedInParent(
+      symbol,
+      builderBlock?.bindings
+    )}
     apiVersion={$builderContext.apiVersion}
     apiKey={symbol?.global && symbol?.ownerId
       ? symbol.ownerId

package/lib/edge/components/builder-scripts.svelte

@@ -0,0 +1,39 @@
+<script context="module">/**
+ * Emits the Variant Container and A/B test helper scripts once for all `Content` components inside it.
+ */
+</script>
+
+<script>import { getContext, setContext } from "svelte";
+import { getInitPersonalizationVariantsFnsScriptString, SDKS_SUPPORTING_PERSONALIZATION, } from "../blocks/personalization-container/helpers";
+import { TARGET } from "../constants/target";
+import BuilderScriptsContext from "../context/builder-scripts.context";
+import { isBrowser } from "../functions/is-browser";
+import { getInitVariantsFnsScriptString, SDKS_SUPPORTING_BUILDER_SCRIPTS, } from "./content-variants/helpers";
+import InlinedScript from "./inlined-script.svelte";
+export let nonce = undefined;
+let parentScriptsContext = getContext(BuilderScriptsContext.key);
+let isSupported = SDKS_SUPPORTING_BUILDER_SCRIPTS.includes(TARGET);
+let shouldRenderAbTestFns = TARGET !== "react" || !isBrowser();
+setContext(BuilderScriptsContext.key, {
+    scriptsEmitted: isSupported,
+});
+</script>
+
+{#if isSupported && !parentScriptsContext?.scriptsEmitted}
+  {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
+    <InlinedScript
+      id="builderio-init-personalization-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+    />
+  {/if}
+
+  {#if shouldRenderAbTestFns}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitVariantsFnsScriptString()}
+    />
+  {/if}
+{/if}
+<slot />

package/lib/edge/components/builder-scripts.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+type BuilderScriptsProps = {
+    nonce?: string;
+    children?: any;
+};
+declare const __propDef: {
+    props: {
+        nonce?: BuilderScriptsProps["nonce"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type BuilderScriptsProps_ = typeof __propDef.props;
+export { BuilderScriptsProps_ as BuilderScriptsProps };
+export type BuilderScriptsEvents = typeof __propDef.events;
+export type BuilderScriptsSlots = typeof __propDef.slots;
+export default class BuilderScripts extends SvelteComponent<BuilderScriptsProps, BuilderScriptsEvents, BuilderScriptsSlots> {
+}

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

@@ -1,8 +1,9 @@
 <script context="module"></script>
 
-<script>import { onMount } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, hasPersonalizationContainer, } from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
+import BuilderScriptsContext from "../../context/builder-scripts.context";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
 import ContentComponent from "../content/content.svelte";
@@ -11,6 +12,7 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
 export let content;
+export let isContentInlinedInParent = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
 export let isNestedRender = undefined;
@@ -29,6 +31,7 @@ export let blocksWrapperProps = undefined;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
 export let trustedHosts = undefined;
+let scriptsContext = getContext(BuilderScriptsContext.key);
 $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
         id: value.testVariationId,
@@ -55,7 +58,9 @@ let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
-let shouldEmitPersonalizationFns = TARGET !== "reactNative" && hasPersonalizationContainer(content);
+let shouldEmitPersonalizationFns = TARGET !== "reactNative" &&
+    !isContentInlinedInParent &&
+    hasPersonalizationContainer(content);
 onMount(() => {
     /**
      * For Solid/Svelte: we unmount the non-winning variants post-hydration.
@@ -64,7 +69,7 @@ onMount(() => {
 });
 </script>
 
-{#if shouldEmitPersonalizationFns}
+{#if shouldEmitPersonalizationFns && !!!scriptsContext?.scriptsEmitted}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"
@@ -75,11 +80,13 @@ onMount(() => {
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedScript
-    id="builderio-init-variants-fns"
-    scriptStr={getInitVariantsFnsScriptString()}
-    nonce={nonce || ""}
-  />
+  {#if !!!scriptsContext?.scriptsEmitted}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      scriptStr={getInitVariantsFnsScriptString()}
+      nonce={nonce || ""}
+    />
+  {/if}
   <InlinedStyles
     id="builderio-variants"
     styles={hideVariantsStyleString()}

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

@@ -4,12 +4,17 @@ type VariantsProviderProps = ContentVariantsPrps & {
      * For internal use only. Do not provide this prop.
      */
     isNestedRender?: boolean;
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isContentInlinedInParent?: boolean;
 };
 import type { ContentVariantsPrps } from "./content-variants.types";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content: VariantsProviderProps["content"];
+        isContentInlinedInParent?: VariantsProviderProps["isContentInlinedInParent"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
         isNestedRender?: VariantsProviderProps["isNestedRender"];

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

@@ -1,5 +1,11 @@
 import type { Nullable } from '../../helpers/nullable';
 import type { BuilderContent } from '../../types/builder-content';
+import type { Target } from '../../types/targets';
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export declare const SDKS_SUPPORTING_BUILDER_SCRIPTS: Target[];
 export declare const getVariants: (content: Nullable<BuilderContent>) => {
     testVariationId: string | undefined;
     id: string | undefined;

package/lib/edge/components/content-variants/helpers.js

@@ -9,6 +9,11 @@ import { UPDATE_COOKIES_AND_STYLES_SCRIPT, UPDATE_VARIANT_VISIBILITY_SCRIPT } fr
  */
 const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = 'builderIoAbTest';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'builderIoRenderContent';
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export const SDKS_SUPPORTING_BUILDER_SCRIPTS = ['react', 'vue', 'svelte', 'solid', 'qwik'];
 export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
     ...variant,
     testVariationId: variant.id,

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.3.0";
+export declare const SDK_VERSION = "5.4.0";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.3.0";
+export const SDK_VERSION = "5.4.0";

package/lib/edge/context/builder-scripts.context.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    BuilderScripts: {
+        scriptsEmitted: boolean;
+    };
+    key: symbol;
+};
+export default _default;

package/lib/edge/context/builder-scripts.context.js

@@ -0,0 +1,5 @@
+const key = Symbol();
+export default {
+    BuilderScripts: { scriptsEmitted: false },
+    key,
+};

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

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

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

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

package/lib/node/blocks/symbol/symbol.helpers.d.ts

@@ -10,6 +10,7 @@ export interface SymbolInfo {
     ownerId?: string;
     global?: boolean;
 }
+export declare const isSymbolContentInlinedInParent: (symbol: SymbolInfo | undefined, bindings: Record<string, string> | undefined) => boolean;
 export declare const fetchSymbolContent: ({ builderContextValue, symbol }: {
     symbol: SymbolInfo | undefined;
     builderContextValue: BuilderContextInterface;

package/lib/node/blocks/symbol/symbol.helpers.js

@@ -1,5 +1,11 @@
 import { fetchOneEntry } from '../../functions/get-content/index';
 import { logger } from '../../helpers/logger';
+const isSymbolContentBinding = (key) => {
+    const path = key.startsWith('component.') ? key.slice(10) : key;
+    return path === 'options.symbol' || path === 'options.symbol.content' || path.startsWith('options.symbol.content.');
+};
+// Bound symbol content is evaluated at render time, so it is not in the parent content JSON.
+export const isSymbolContentInlinedInParent = (symbol, bindings) => !!symbol?.content && !Object.keys(bindings || {}).some(isSymbolContentBinding);
 export const fetchSymbolContent = async ({ builderContextValue, symbol }) => {
     /**
      * If:

package/lib/node/blocks/symbol/symbol.svelte

@@ -4,7 +4,7 @@ import { filterAttrs } from "../helpers";
 import "../../components/dynamic-div.svelte";
 import { getClassPropName } from "../../functions/get-class-prop-name";
 import { setAttrs } from "../helpers";
-import { fetchSymbolContent } from "./symbol.helpers";
+import { fetchSymbolContent, isSymbolContentInlinedInParent, } from "./symbol.helpers";
 export let symbol = undefined;
 export let builderComponents;
 export let attributes = undefined;
@@ -64,6 +64,10 @@ $: onUpdateFn_0(...[symbol]);
   <ContentVariants
     nonce={$builderContext.nonce}
     isNestedRender={true}
+    isContentInlinedInParent={isSymbolContentInlinedInParent(
+      symbol,
+      builderBlock?.bindings
+    )}
     apiVersion={$builderContext.apiVersion}
     apiKey={symbol?.global && symbol?.ownerId
       ? symbol.ownerId

package/lib/node/components/builder-scripts.svelte

@@ -0,0 +1,39 @@
+<script context="module">/**
+ * Emits the Variant Container and A/B test helper scripts once for all `Content` components inside it.
+ */
+</script>
+
+<script>import { getContext, setContext } from "svelte";
+import { getInitPersonalizationVariantsFnsScriptString, SDKS_SUPPORTING_PERSONALIZATION, } from "../blocks/personalization-container/helpers";
+import { TARGET } from "../constants/target";
+import BuilderScriptsContext from "../context/builder-scripts.context";
+import { isBrowser } from "../functions/is-browser";
+import { getInitVariantsFnsScriptString, SDKS_SUPPORTING_BUILDER_SCRIPTS, } from "./content-variants/helpers";
+import InlinedScript from "./inlined-script.svelte";
+export let nonce = undefined;
+let parentScriptsContext = getContext(BuilderScriptsContext.key);
+let isSupported = SDKS_SUPPORTING_BUILDER_SCRIPTS.includes(TARGET);
+let shouldRenderAbTestFns = TARGET !== "react" || !isBrowser();
+setContext(BuilderScriptsContext.key, {
+    scriptsEmitted: isSupported,
+});
+</script>
+
+{#if isSupported && !parentScriptsContext?.scriptsEmitted}
+  {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
+    <InlinedScript
+      id="builderio-init-personalization-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+    />
+  {/if}
+
+  {#if shouldRenderAbTestFns}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitVariantsFnsScriptString()}
+    />
+  {/if}
+{/if}
+<slot />

package/lib/node/components/builder-scripts.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+type BuilderScriptsProps = {
+    nonce?: string;
+    children?: any;
+};
+declare const __propDef: {
+    props: {
+        nonce?: BuilderScriptsProps["nonce"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+type BuilderScriptsProps_ = typeof __propDef.props;
+export { BuilderScriptsProps_ as BuilderScriptsProps };
+export type BuilderScriptsEvents = typeof __propDef.events;
+export type BuilderScriptsSlots = typeof __propDef.slots;
+export default class BuilderScripts extends SvelteComponent<BuilderScriptsProps, BuilderScriptsEvents, BuilderScriptsSlots> {
+}

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

@@ -1,8 +1,9 @@
 <script context="module"></script>
 
-<script>import { onMount } from "svelte";
+<script>import { getContext, onMount } from "svelte";
 import { SDKS_SUPPORTING_PERSONALIZATION, getInitPersonalizationVariantsFnsScriptString, hasPersonalizationContainer, } from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
+import BuilderScriptsContext from "../../context/builder-scripts.context";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
 import ContentComponent from "../content/content.svelte";
@@ -11,6 +12,7 @@ import InlinedStyles from "../inlined-styles.svelte";
 import { checkShouldRenderVariants, getInitVariantsFnsScriptString, getUpdateCookieAndStylesScript, getVariants, } from "./helpers";
 export let canTrack = undefined;
 export let content;
+export let isContentInlinedInParent = undefined;
 export let nonce = undefined;
 export let apiHost = undefined;
 export let isNestedRender = undefined;
@@ -29,6 +31,7 @@ export let blocksWrapperProps = undefined;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
 export let trustedHosts = undefined;
+let scriptsContext = getContext(BuilderScriptsContext.key);
 $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(getVariants(content).map((value) => ({
         id: value.testVariationId,
@@ -55,7 +58,9 @@ let shouldRenderVariants = checkShouldRenderVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
-let shouldEmitPersonalizationFns = TARGET !== "reactNative" && hasPersonalizationContainer(content);
+let shouldEmitPersonalizationFns = TARGET !== "reactNative" &&
+    !isContentInlinedInParent &&
+    hasPersonalizationContainer(content);
 onMount(() => {
     /**
      * For Solid/Svelte: we unmount the non-winning variants post-hydration.
@@ -64,7 +69,7 @@ onMount(() => {
 });
 </script>
 
-{#if shouldEmitPersonalizationFns}
+{#if shouldEmitPersonalizationFns && !!!scriptsContext?.scriptsEmitted}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"
@@ -75,11 +80,13 @@ onMount(() => {
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedScript
-    id="builderio-init-variants-fns"
-    scriptStr={getInitVariantsFnsScriptString()}
-    nonce={nonce || ""}
-  />
+  {#if !!!scriptsContext?.scriptsEmitted}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      scriptStr={getInitVariantsFnsScriptString()}
+      nonce={nonce || ""}
+    />
+  {/if}
   <InlinedStyles
     id="builderio-variants"
     styles={hideVariantsStyleString()}

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

@@ -4,12 +4,17 @@ type VariantsProviderProps = ContentVariantsPrps & {
      * For internal use only. Do not provide this prop.
      */
     isNestedRender?: boolean;
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isContentInlinedInParent?: boolean;
 };
 import type { ContentVariantsPrps } from "./content-variants.types";
 declare const __propDef: {
     props: {
         canTrack?: VariantsProviderProps["canTrack"];
         content: VariantsProviderProps["content"];
+        isContentInlinedInParent?: VariantsProviderProps["isContentInlinedInParent"];
         nonce?: VariantsProviderProps["nonce"];
         apiHost?: VariantsProviderProps["apiHost"];
         isNestedRender?: VariantsProviderProps["isNestedRender"];

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

@@ -1,5 +1,11 @@
 import type { Nullable } from '../../helpers/nullable';
 import type { BuilderContent } from '../../types/builder-content';
+import type { Target } from '../../types/targets';
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export declare const SDKS_SUPPORTING_BUILDER_SCRIPTS: Target[];
 export declare const getVariants: (content: Nullable<BuilderContent>) => {
     testVariationId: string | undefined;
     id: string | undefined;

package/lib/node/components/content-variants/helpers.js

@@ -9,6 +9,11 @@ import { UPDATE_COOKIES_AND_STYLES_SCRIPT, UPDATE_VARIANT_VISIBILITY_SCRIPT } fr
  */
 const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = 'builderIoAbTest';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'builderIoRenderContent';
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export const SDKS_SUPPORTING_BUILDER_SCRIPTS = ['react', 'vue', 'svelte', 'solid', 'qwik'];
 export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
     ...variant,
     testVariationId: variant.id,

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "5.3.0";
+export declare const SDK_VERSION = "5.4.0";

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

@@ -1 +1 @@
-export const SDK_VERSION = "5.3.0";
+export const SDK_VERSION = "5.4.0";

package/lib/node/context/builder-scripts.context.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    BuilderScripts: {
+        scriptsEmitted: boolean;
+    };
+    key: symbol;
+};
+export default _default;

package/lib/node/context/builder-scripts.context.js

@@ -0,0 +1,5 @@
+const key = Symbol();
+export default {
+    BuilderScripts: { scriptsEmitted: false },
+    key,
+};

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

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

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

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 /**
  * Builder Context

package/package.json

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

package/src/blocks/symbol/symbol.helpers.ts

@@ -12,6 +12,13 @@ export interface SymbolInfo {
   ownerId?: string;
   global?: boolean;
 }
+const isSymbolContentBinding = (key: string) => {
+  const path = key.startsWith('component.') ? key.slice(10) : key;
+  return path === 'options.symbol' || path === 'options.symbol.content' || path.startsWith('options.symbol.content.');
+};
+
+// Bound symbol content is evaluated at render time, so it is not in the parent content JSON.
+export const isSymbolContentInlinedInParent = (symbol: SymbolInfo | undefined, bindings: Record<string, string> | undefined) => !!symbol?.content && !Object.keys(bindings || {}).some(isSymbolContentBinding);
 export const fetchSymbolContent = async ({
   builderContextValue,
   symbol

package/src/blocks/symbol/symbol.svelte

@@ -8,7 +8,10 @@
   import { getClassPropName } from "../../functions/get-class-prop-name";
   import type { Nullable } from "../../types/typescript";
   import { setAttrs } from "../helpers";
-  import { fetchSymbolContent } from "./symbol.helpers";
+  import {
+    fetchSymbolContent,
+    isSymbolContentInlinedInParent,
+  } from "./symbol.helpers";
   import type { SymbolProps } from "./symbol.types";
 
   export let symbol: SymbolProps["symbol"] = undefined;
@@ -75,6 +78,10 @@
   <ContentVariants
     nonce={$builderContext.nonce}
     isNestedRender={true}
+    isContentInlinedInParent={isSymbolContentInlinedInParent(
+      symbol,
+      builderBlock?.bindings
+    )}
     apiVersion={$builderContext.apiVersion}
     apiKey={symbol?.global && symbol?.ownerId
       ? symbol.ownerId

package/src/components/builder-scripts.svelte

@@ -0,0 +1,57 @@
+<script context="module" lang="ts">
+  type BuilderScriptsProps = {
+    nonce?: string;
+    children?: any;
+  };
+
+  /**
+   * Emits the Variant Container and A/B test helper scripts once for all `Content` components inside it.
+   */
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import {
+    getInitPersonalizationVariantsFnsScriptString,
+    SDKS_SUPPORTING_PERSONALIZATION,
+  } from "../blocks/personalization-container/helpers";
+  import { TARGET } from "../constants/target";
+  import BuilderScriptsContext from "../context/builder-scripts.context";
+  import { isBrowser } from "../functions/is-browser";
+  import {
+    getInitVariantsFnsScriptString,
+    SDKS_SUPPORTING_BUILDER_SCRIPTS,
+  } from "./content-variants/helpers";
+  import InlinedScript from "./inlined-script.svelte";
+
+  export let nonce: BuilderScriptsProps["nonce"] = undefined;
+
+  let parentScriptsContext = getContext(BuilderScriptsContext.key);
+
+  let isSupported = SDKS_SUPPORTING_BUILDER_SCRIPTS.includes(TARGET);
+  let shouldRenderAbTestFns = TARGET !== "react" || !isBrowser();
+
+  setContext(BuilderScriptsContext.key, {
+    scriptsEmitted: isSupported,
+  });
+</script>
+
+{#if isSupported && !parentScriptsContext?.scriptsEmitted}
+  {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
+    <InlinedScript
+      id="builderio-init-personalization-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+    />
+  {/if}
+
+  {#if shouldRenderAbTestFns}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      nonce={nonce || ""}
+      scriptStr={getInitVariantsFnsScriptString()}
+    />
+  {/if}
+{/if}
+<slot />

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

@@ -4,11 +4,15 @@
      * For internal use only. Do not provide this prop.
      */
     isNestedRender?: boolean;
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    isContentInlinedInParent?: boolean;
   };
 </script>
 
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
 
   import {
     SDKS_SUPPORTING_PERSONALIZATION,
@@ -16,6 +20,7 @@
     hasPersonalizationContainer,
   } from "../../blocks/personalization-container/helpers";
   import { TARGET } from "../../constants/target";
+  import BuilderScriptsContext from "../../context/builder-scripts.context";
   import { handleABTestingSync } from "../../helpers/ab-tests";
   import { getDefaultCanTrack } from "../../helpers/canTrack";
   import ContentComponent from "../content/content.svelte";
@@ -31,6 +36,8 @@
 
   export let canTrack: VariantsProviderProps["canTrack"] = undefined;
   export let content: VariantsProviderProps["content"];
+  export let isContentInlinedInParent: VariantsProviderProps["isContentInlinedInParent"] =
+    undefined;
   export let nonce: VariantsProviderProps["nonce"] = undefined;
   export let apiHost: VariantsProviderProps["apiHost"] = undefined;
   export let isNestedRender: VariantsProviderProps["isNestedRender"] =
@@ -55,6 +62,8 @@
     undefined;
   export let trustedHosts: VariantsProviderProps["trustedHosts"] = undefined;
 
+  let scriptsContext = getContext(BuilderScriptsContext.key);
+
   $: updateCookieAndStylesScriptStr = () => {
     return getUpdateCookieAndStylesScript(
       getVariants(content).map((value) => ({
@@ -86,7 +95,9 @@
     content: content,
   });
   let shouldEmitPersonalizationFns =
-    TARGET !== "reactNative" && hasPersonalizationContainer(content);
+    TARGET !== "reactNative" &&
+    !isContentInlinedInParent &&
+    hasPersonalizationContainer(content);
 
   onMount(() => {
     /**
@@ -96,7 +107,7 @@
   });
 </script>
 
-{#if shouldEmitPersonalizationFns}
+{#if shouldEmitPersonalizationFns && !!!scriptsContext?.scriptsEmitted}
   {#if SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET)}
     <InlinedScript
       id="builderio-init-personalization-variants-fns"
@@ -107,11 +118,13 @@
 {/if}
 
 {#if shouldRenderVariants}
-  <InlinedScript
-    id="builderio-init-variants-fns"
-    scriptStr={getInitVariantsFnsScriptString()}
-    nonce={nonce || ""}
-  />
+  {#if !!!scriptsContext?.scriptsEmitted}
+    <InlinedScript
+      id="builderio-init-variants-fns"
+      scriptStr={getInitVariantsFnsScriptString()}
+      nonce={nonce || ""}
+    />
+  {/if}
   <InlinedStyles
     id="builderio-variants"
     styles={hideVariantsStyleString()}

package/src/components/content-variants/helpers.ts

@@ -13,6 +13,12 @@ import { UPDATE_COOKIES_AND_STYLES_SCRIPT, UPDATE_VARIANT_VISIBILITY_SCRIPT } fr
  */
 const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = 'builderIoAbTest';
 const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'builderIoRenderContent';
+
+/**
+ * SDKs where `BuilderScripts` can dedupe helper scripts. Elsewhere `Content` cannot read its context
+ * (RSC server components, Angular DI) or has no inline scripts (React Native).
+ */
+export const SDKS_SUPPORTING_BUILDER_SCRIPTS = (['react', 'vue', 'svelte', 'solid', 'qwik'] as Target[]);
 export const getVariants = (content: Nullable<BuilderContent>) => Object.values(content?.variations || {}).map(variant => ({
   ...variant,
   testVariationId: variant.id,

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "5.3.0"
+export const SDK_VERSION = "5.4.0"

package/src/context/builder-scripts.context.ts

@@ -0,0 +1,6 @@
+const key = Symbol();
+
+export default {
+  BuilderScripts: { scriptsEmitted: false },
+  key,
+};

package/src/index-helpers/blocks-exports.ts

@@ -7,6 +7,7 @@ export { default as Symbol } from '../blocks/symbol/index';
 export { default as Text } from '../blocks/text/index';
 export { default as Video } from '../blocks/video/index';
 export { default as Blocks } from '../components/blocks/index';
+export { default as BuilderScripts } from '../components/builder-scripts.svelte';
 export { default as Content } from '../components/content-variants/index';
 
 /**