@builder.io/sdk-svelte 5.2.16 → 5.4.0

package/lib/edge/functions/set.js

@@ -1,17 +1,98 @@
+const parsePath = (path) => path.toString().match(/[^.[\]]+/g);
+const isArrayIndex = (key) => Math.abs(Number(key)) >> 0 === +key;
+/**
+ * `__proto__` is never allowed. `constructor` and `prototype` are allowed only as
+ * the final key, where they are written as ordinary own properties.
+ */
+const hasUnsafeSegment = (path) => path.some((key, i) => key === '__proto__' || i < path.length - 1 && (key === 'constructor' || key === 'prototype'));
+/**
+ * Own properties only, so a path can never walk into a value shared through a
+ * prototype (e.g. `Object.prototype.toString`) and mutate it.
+ */
+const getOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key) ? obj[key] : undefined;
 /**
  * Minimal implementation of lodash's _.set
  * https://lodash.com/docs/4.17.15#set
  *
- * See ./set.test.ts for usage examples
+ * Mutates `obj` in place, creating missing objects/arrays along the path:
+ *
+ *   const obj = { a: { b: 1 } };
+ *   set(obj, 'a.c', 2);      // obj is { a: { b: 1, c: 2 } }
+ *   set(obj, 'list.0', 'x'); // obj.list is ['x']
+ *
+ * See ./set.test.ts for more usage examples
  */
 export const set = (obj, _path, value) => {
     if (Object(obj) !== obj) {
         return obj;
     }
-    const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
-    if (!path || path.some((key, i) => key === '__proto__' || i < path.length - 1 && (key === 'constructor' || key === 'prototype'))) {
+    const path = Array.isArray(_path) ? _path : parsePath(_path);
+    if (!path || hasUnsafeSegment(path)) {
         return obj;
     }
-    path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+    path.slice(0, -1).reduce((a, c, i) => {
+        const next = getOwn(a, c);
+        return Object(next) === next ? next : a[c] = isArrayIndex(path[i + 1]) ? [] : {};
+    }, obj)[path[path.length - 1]] = value;
+    return obj;
+};
+/**
+ * Like `set`, but every object or array along `path` that is not in `copied`
+ * is shallow-copied before being written to, so objects shared with the
+ * original are never mutated. `obj` itself must already be a copy.
+ *
+ *   const block = { options: { text: 'a' }, style: { color: 'red' } };
+ *   const copy = { ...block };
+ *   setCopyOnWrite(copy, 'options.text', 'b', new WeakSet());
+ *   // copy.options is a new object: { text: 'b' }
+ *   // block.options.text is still 'a'
+ *   // copy.style === block.style (untouched branches stay shared)
+ */
+export const setCopyOnWrite = (obj, _path, value, copied) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const path = parsePath(_path);
+    if (!path || hasUnsafeSegment(path)) {
+        return obj;
+    }
+    copied.add(obj);
+    let current = obj;
+    for (let i = 0; i < path.length - 1; i++) {
+        const key = path[i];
+        let next = getOwn(current, key);
+        if (Object(next) !== next) {
+            next = isArrayIndex(path[i + 1]) ? [] : {};
+            copied.add(next);
+            current[key] = next;
+        }
+        else if (typeof next === 'object' && !copied.has(next)) {
+            next = Array.isArray(next) ? next.slice() : {
+                ...next
+            };
+            copied.add(next);
+            current[key] = next;
+        }
+        current = next;
+    }
+    current[path[path.length - 1]] = value;
+    return obj;
+};
+/**
+ * Deletes the property at `path`, the inverse of `set` for an array path.
+ * Mutates `obj` in place and does nothing when a parent is missing:
+ *
+ *   const obj = { a: { b: 1, c: 2 } };
+ *   unset(obj, ['a', 'b']); // obj is { a: { c: 2 } }
+ *   unset(obj, ['x', 'y']); // no-op
+ */
+export const unset = (obj, path) => {
+    if (Object(obj) !== obj || !path.length || hasUnsafeSegment(path)) {
+        return obj;
+    }
+    const parent = path.slice(0, -1).reduce((a, c) => Object(a) === a ? getOwn(a, c) : undefined, obj);
+    if (Object(parent) === parent) {
+        delete parent[path[path.length - 1]];
+    }
     return obj;
 };

package/lib/edge/helpers/bounded-cache.d.ts

@@ -0,0 +1,4 @@
+export declare const createBoundedCache: <V>(max: number) => {
+    get: (key: string) => V | undefined;
+    set: (key: string, value: V) => void;
+};

package/lib/edge/helpers/bounded-cache.js

@@ -0,0 +1,12 @@
+export const createBoundedCache = (max) => {
+    const map = new Map();
+    return {
+        get: (key) => map.get(key),
+        set: (key, value) => {
+            if (!map.has(key) && map.size >= max) {
+                map.delete(map.keys().next().value);
+            }
+            map.set(key, value);
+        }
+    };
+};

package/lib/edge/helpers/copy-plain-data.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Deep-copies plain objects and arrays (anything else is kept by reference), so
+ * that state writes made while rendering never reach the content object, which
+ * apps often cache and share between requests.
+ */
+export declare const copyPlainData: <T>(value: T, seen?: WeakMap<object, any>) => T;

package/lib/edge/helpers/copy-plain-data.js

@@ -0,0 +1,40 @@
+/**
+ * Deep-copies plain objects and arrays (anything else is kept by reference), so
+ * that state writes made while rendering never reach the content object, which
+ * apps often cache and share between requests.
+ */
+export const copyPlainData = (value, seen = new WeakMap()) => {
+    if (value === null || typeof value !== 'object')
+        return value;
+    if (seen.has(value))
+        return seen.get(value);
+    if (Array.isArray(value)) {
+        const copy = [];
+        seen.set(value, copy);
+        for (let i = 0; i < value.length; i++) {
+            copy[i] = copyPlainData(value[i], seen);
+        }
+        return copy;
+    }
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null)
+        return value;
+    const copy = {};
+    seen.set(value, copy);
+    for (const key of Object.keys(value)) {
+        const copied = copyPlainData(value[key], seen);
+        if (key === '__proto__') {
+            // Assigning would call the prototype setter; JSON can carry `__proto__` as an own key.
+            Object.defineProperty(copy, key, {
+                value: copied,
+                enumerable: true,
+                writable: true,
+                configurable: true
+            });
+        }
+        else {
+            copy[key] = copied;
+        }
+    }
+    return copy;
+};

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/block/block.helpers.d.ts

@@ -22,9 +22,7 @@ export declare const provideLinkComponent: (block: RegisteredComponent | null |
     builderLinkComponent?: undefined;
 };
 export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents, model: string) => {
-    builderComponents: {
-        [k: string]: RegisteredComponent;
-    };
+    builderComponents: RegisteredComponents;
 } | {
     builderComponents?: undefined;
 };

package/lib/node/components/block/block.helpers.js

@@ -1,6 +1,7 @@
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getStyle } from '../../functions/get-style';
+import { isEditingOrPreviewing } from '../../functions/is-editing-or-previewing';
 const checkIsComponentRestricted = (component, model) => {
     if (!component)
         return true;
@@ -25,12 +26,27 @@ export const getComponent = ({ block, registeredComponents, model }) => {
         return ref;
     }
 };
+// Reused per block so repeated items keep a stable block identity across renders.
+const BLOCKS_WITHOUT_REPEAT = new WeakMap();
+const getBlockWithoutRepeat = (block) => {
+    if (isEditingOrPreviewing()) {
+        const { repeat: _repeat, ...rest } = block;
+        return rest;
+    }
+    let blockWithoutRepeat = BLOCKS_WITHOUT_REPEAT.get(block);
+    if (!blockWithoutRepeat) {
+        const { repeat: _repeat, ...rest } = block;
+        blockWithoutRepeat = rest;
+        BLOCKS_WITHOUT_REPEAT.set(block, blockWithoutRepeat);
+    }
+    return blockWithoutRepeat;
+};
 export const getRepeatItemData = ({ block, context }) => {
     /**
      * we don't use `state.processedBlock` here because the processing done within its logic includes evaluating the block's bindings,
      * which will not work if there is a repeat.
      */
-    const { repeat, ...blockWithoutRepeat } = block;
+    const { repeat } = block;
     if (!repeat?.collection) {
         return undefined;
     }
@@ -46,6 +62,7 @@ export const getRepeatItemData = ({ block, context }) => {
     }
     const collectionName = repeat.collection.split('.').pop();
     const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+    const blockWithoutRepeat = getBlockWithoutRepeat(block);
     const repeatArray = itemsArray.map((item, index) => ({
         context: {
             ...context,
@@ -78,11 +95,21 @@ export const provideLinkComponent = (block, linkComponent) => {
         };
     return {};
 };
+const FILTERED_REGISTERED_COMPONENTS = new WeakMap();
 export const provideRegisteredComponents = (block, registeredComponents, model) => {
     if (block?.shouldReceiveBuilderProps?.builderComponents) {
-        const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
-            return !checkIsComponentRestricted(component, model);
-        }));
+        let byModel = FILTERED_REGISTERED_COMPONENTS.get(registeredComponents);
+        if (!byModel) {
+            byModel = new Map();
+            FILTERED_REGISTERED_COMPONENTS.set(registeredComponents, byModel);
+        }
+        let filteredRegisteredComponents = byModel.get(model);
+        if (!filteredRegisteredComponents) {
+            filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+                return !checkIsComponentRestricted(component, model);
+            }));
+            byModel.set(model, filteredRegisteredComponents);
+        }
         return {
             builderComponents: filteredRegisteredComponents
         };

package/lib/node/components/block/block.svelte

@@ -73,7 +73,15 @@ $: childrenWithoutParentComponent = () => {
         : [];
 };
 $: componentRefProps = () => {
-    return {
+    const deps = [
+        processedBlock(),
+        $context,
+        $context.rootState,
+        $context.localState,
+        registeredComponents,
+        linkComponent,
+    ];
+    const componentRefProps = {
         blockChildren: processedBlock().children ?? [],
         componentRef: blockComponent?.()?.component,
         componentOptions: {
@@ -90,11 +98,16 @@ $: componentRefProps = () => {
         includeBlockProps: blockComponent?.()?.noWrap === true,
         isInteractive: !(blockComponent?.()?.isRSC && TARGET === "rsc"),
     };
+    return componentRefProps;
 };
 let _processedBlock = {
     value: null,
     update: false,
 };
+let _componentRefProps = {
+    value: null,
+    deps: [],
+};
 onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;

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/components/styles.helpers.d.ts

@@ -13,5 +13,5 @@ export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string | undefined;
     contentId?: string | undefined;
 }) => string;
-export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";
+export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n:where(.builder-button) {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";
 export declare const getWrapperClassName: (variationId?: string) => string;

package/lib/node/components/content/components/styles.helpers.js

@@ -57,7 +57,7 @@ export const getCss = ({ cssCode, contentId }) => {
     return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
 };
 const DEFAULT_STYLES = `
-.builder-button {
+:where(.builder-button) {
   all: unset;
 }
 

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

@@ -1,6 +1,10 @@
+import type { RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
+import type { ComponentInfo } from '../../types/components';
+import type { Dictionary, Nullable } from '../../types/typescript';
 import type { ContentProps } from './content.types';
+export declare const getRegisteredComponents: (registrations: RegisteredComponent[], wrapComponent: (component: any) => any) => RegisteredComponents;
+export declare const getComponentInfos: (registrations: RegisteredComponent[]) => Dictionary<ComponentInfo>;
 export declare const getRootStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
     locale?: string | undefined;
 };

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

@@ -1,10 +1,47 @@
+import { serializeIncludingFunctions } from '../../functions/register-component';
+import { copyPlainData } from '../../helpers/copy-plain-data';
+// Registrations are usually module constants, so their derived forms are built once per object.
+const SERIALIZED_COMPONENT_INFOS = new WeakMap();
+const REGISTERED_COMPONENT_ENTRIES = new WeakMap();
+const getSerializedComponentInfo = (registration) => {
+    const cached = SERIALIZED_COMPONENT_INFOS.get(registration);
+    if (cached)
+        return cached;
+    const { component: _, ...rest } = registration;
+    const info = serializeIncludingFunctions(rest);
+    SERIALIZED_COMPONENT_INFOS.set(registration, info);
+    return info;
+};
+export const getRegisteredComponents = (registrations, wrapComponent) => {
+    const registeredComponents = {};
+    for (const registration of registrations) {
+        let entry = REGISTERED_COMPONENT_ENTRIES.get(registration);
+        if (!entry) {
+            entry = {
+                component: wrapComponent(registration.component),
+                ...getSerializedComponentInfo(registration)
+            };
+            REGISTERED_COMPONENT_ENTRIES.set(registration, entry);
+        }
+        registeredComponents[registration.name] = entry;
+    }
+    return registeredComponents;
+};
+export const getComponentInfos = (registrations) => {
+    const componentInfos = {};
+    for (const registration of registrations) {
+        componentInfos[registration.name] = getSerializedComponentInfo(registration);
+    }
+    return componentInfos;
+};
 export const getRootStateInitialValue = ({ content, data, locale }) => {
     const defaultValues = {};
-    const initialState = content?.data?.state || {};
+    const seen = new WeakMap();
+    const initialState = copyPlainData(content?.data?.state || {}, seen);
     // set default values for content state inputs
     content?.data?.inputs?.forEach(input => {
         if (input.name && input.defaultValue !== undefined) {
-            defaultValues[input.name] = input.defaultValue;
+            defaultValues[input.name] = copyPlainData(input.defaultValue, seen);
         }
     });
     return {

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

@@ -4,7 +4,6 @@ import { getDefaultRegisteredComponents } from "../../constants/builder-register
 import { TARGET } from "../../constants/target";
 import ComponentsContext from "../../context/components.context";
 import { evaluate } from "../../functions/evaluate/evaluate";
-import { serializeIncludingFunctions } from "../../functions/register-component";
 import { logger } from "../../helpers/logger";
 import Blocks from "../blocks/blocks.svelte";
 import { getUpdateVariantVisibilityScript } from "../content-variants/helpers";
@@ -12,7 +11,7 @@ import "../dynamic-div.svelte";
 import InlinedScript from "../inlined-script.svelte";
 import EnableEditor from "./components/enable-editor.svelte";
 import ContentStyles from "./components/styles.svelte";
-import { getContentInitialValue, getRootStateInitialValue, } from "./content.helpers";
+import { getComponentInfos, getContentInitialValue, getRegisteredComponents, getRootStateInitialValue, } from "./content.helpers";
 import "./wrap-component-ref";
 export let content;
 export let data = undefined;
@@ -45,16 +44,7 @@ let scriptStr = getUpdateVariantVisibilityScript({
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     contentId: content?.id,
 });
-let registeredComponents = [
-    ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
-].reduce((acc, { component, ...info }) => ({
-    ...acc,
-    [info.name]: {
-        component: component,
-        ...serializeIncludingFunctions(info),
-    },
-}), {});
+let registeredComponents = getRegisteredComponents([...getDefaultRegisteredComponents(), ...(customComponents || [])], (component) => component);
 let builderContextSignal = writable({
     content: getContentInitialValue({
         content: content,
@@ -71,13 +61,10 @@ let builderContextSignal = writable({
     canTrack: canTrack,
     apiKey: apiKey,
     apiVersion: apiVersion,
-    componentInfos: [
+    componentInfos: getComponentInfos([
         ...getDefaultRegisteredComponents(),
         ...(customComponents || []),
-    ].reduce((acc, { component: _, ...info }) => ({
-        ...acc,
-        [info.name]: serializeIncludingFunctions(info),
-    }), {}),
+    ]),
     inheritedStyles: {},
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},

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,