@builder.io/sdk-react 0.4.5 → 0.5.1-0

package/dist/components/block/components/repeated-block.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+};
+import type { BuilderContextInterface, RegisteredComponents } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+declare function RepeatedBlock(props: Props): JSX.Element;
+export default RepeatedBlock;

package/dist/{sdk/components → components}/block/components/repeated-block.js

@@ -1,11 +1,11 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState } from "react";
-import BuilderContext from "../../../context/builder.context.js";
+import BuilderContext from "../../../context/builder.context";
 import Block from "../block";
 function RepeatedBlock(props) {
     const [store, setStore] = useState(() => props.repeatContext);
     return (React.createElement(BuilderContext.Provider, { value: store },
-        React.createElement(Block, { block: props.block, context: store, components: props.components })));
+        React.createElement(Block, { block: props.block, context: store, registeredComponents: props.registeredComponents })));
 }
 export default RepeatedBlock;

package/dist/{sdk/components → components}/blocks/blocks-wrapper.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
 export type BlocksWrapperProps = {
     blocks: BuilderBlock[] | undefined;
     parent: string | undefined;
     path: string | undefined;
     styleProp: Record<string, any> | undefined;
 };
-type PropsWithChildren = BlocksWrapperProps & {
-    children?: any;
-};
 import type { BuilderBlock } from "../../types/builder-block.js";
-declare function BlocksWrapper(props: PropsWithChildren): JSX.Element;
+import type { PropsWithChildren } from "../../types/typescript.js";
+declare function BlocksWrapper(props: PropsWithChildren<BlocksWrapperProps>): JSX.Element;
 export default BlocksWrapper;

package/dist/{sdk/components → components}/blocks/blocks-wrapper.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 function BlocksWrapper(props) {
@@ -28,8 +28,8 @@ function BlocksWrapper(props) {
         }
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-7cb52693", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() }, props.children),
-        React.createElement("style", null, `.div-7cb52693 {
+        React.createElement("div", { className: className() + " div-b2473120", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() }, props.children),
+        React.createElement("style", null, `.div-b2473120 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/components/blocks/blocks.d.ts

@@ -0,0 +1,8 @@
+export type BlocksProps = Partial<BlocksWrapperProps> & {
+    context?: BuilderContextInterface;
+    registeredComponents?: RegisteredComponents;
+};
+import type { BlocksWrapperProps } from "./blocks-wrapper";
+import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
+declare function Blocks(props: BlocksProps): JSX.Element;
+export default Blocks;

package/dist/{sdk/components → components}/blocks/blocks.js

@@ -1,11 +1,17 @@
-'use client';
+"use client";
 import * as React from "react";
+import { useContext } from "react";
 import BlockStyles from "../block/components/block-styles";
 import Block from "../block/block";
 import BlocksWrapper from "./blocks-wrapper";
+import BuilderContext from "../../context/builder.context";
+import ComponentsContext from "../../context/components.context";
 function Blocks(props) {
+    const builderContext = useContext(BuilderContext);
+    const componentsContext = useContext(ComponentsContext);
     return (React.createElement(BlocksWrapper, { blocks: props.blocks, parent: props.parent, path: props.path, styleProp: props.styleProp },
-        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(Block, { key: "render-block-" + block.id, block: block, context: props.context, components: props.components }))))) : null,
-        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: props.context }))))) : null));
+        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(Block, { key: "render-block-" + block.id, block: block, context: props.context || builderContext, registeredComponents: props.registeredComponents ||
+                componentsContext.registeredComponents }))))) : null,
+        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: props.context || builderContext }))))) : null));
 }
 export default Blocks;

package/dist/components/content/components/enable-editor.d.ts

@@ -0,0 +1,9 @@
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
+    builderContextSignal: BuilderContextInterface;
+    setBuilderContextSignal?: (signal: any) => any;
+    children?: any;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { ContentProps } from "../content.types.js";
+declare function EnableEditor(props: BuilderEditorProps): JSX.Element;
+export default EnableEditor;

package/dist/{sdk/components → components}/content/components/enable-editor.js

@@ -1,43 +1,45 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
-import { evaluate } from "../../../functions/evaluate.js";
-import { getContent } from "../../../functions/get-content/index.js";
+import { evaluate } from "../../../functions/evaluate";
 import { fetch } from "../../../functions/get-fetch.js";
 import { isBrowser } from "../../../functions/is-browser.js";
 import { isEditing } from "../../../functions/is-editing.js";
-import { isPreviewing } from "../../../functions/is-previewing.js";
 import { createRegisterComponentMessage } from "../../../functions/register-component.js";
 import { _track } from "../../../functions/track/index.js";
-import builderContext from "../../../context/builder.context.js";
+import builderContext from "../../../context/builder.context";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
 import { checkIsDefined } from "../../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
-import { TARGET } from "../../../constants/target.js";
 import { logger } from "../../../helpers/logger.js";
+import { getContent } from "../../../functions/get-content/index.js";
+import { isPreviewing } from "../../../functions/is-previewing.js";
 function EnableEditor(props) {
     const elementRef = useRef(null);
+    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
     const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
     function mergeNewContent(newContent) {
+        const newContentValue = {
+            ...props.builderContextSignal.content,
+            ...newContent,
+            data: {
+                ...props.builderContextSignal.content?.data,
+                ...newContent?.data,
+            },
+            meta: {
+                ...props.builderContextSignal.content?.meta,
+                ...newContent?.meta,
+                breakpoints: newContent?.meta?.breakpoints ||
+                    props.builderContextSignal.content?.meta?.breakpoints,
+            },
+        };
         props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
             ...PREVIOUS_VALUE,
-            content: {
-                ...props.builderContextSignal.content,
-                ...newContent,
-                data: {
-                    ...props.builderContextSignal.content?.data,
-                    ...newContent?.data,
-                },
-                meta: {
-                    ...props.builderContextSignal.content?.meta,
-                    ...newContent?.meta,
-                    breakpoints: newContent?.meta?.breakpoints ||
-                        props.builderContextSignal.content?.meta?.breakpoints,
-                },
-            },
+            content: newContentValue,
         }));
     }
-    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
+    const [lastUpdated, setLastUpdated] = useState(() => 0);
+    const [shouldSendResetCookie, setShouldSendResetCookie] = useState(() => false);
     function processMessage(event) {
         const { data } = event;
         if (data) {
@@ -72,10 +74,6 @@ function EnableEditor(props) {
                     }
                     break;
                 }
-                case "builder.patchUpdates": {
-                    // TODO
-                    break;
-                }
             }
         }
     }
@@ -167,6 +165,7 @@ function EnableEditor(props) {
         if (isBrowser()) {
             if (isEditing()) {
                 setForceReRenderCount(forceReRenderCount + 1);
+                window.addEventListener("message", processMessage);
                 registerInsertMenu();
                 setupBrowserForEditing({
                     ...(props.locale
@@ -185,11 +184,10 @@ function EnableEditor(props) {
                         }
                         : {}),
                 });
-                Object.values(props.builderContextSignal.registeredComponents).forEach((registeredComponent) => {
+                Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
                     const message = createRegisterComponentMessage(registeredComponent);
                     window.parent?.postMessage(message, "*");
                 });
-                window.addEventListener("message", processMessage);
                 window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
             }
             if (props.builderContextSignal.content) {
@@ -222,7 +220,7 @@ function EnableEditor(props) {
                     getContent({
                         model: props.model,
                         apiKey: props.apiKey,
-                        apiVersion: props.apiVersion,
+                        apiVersion: props.builderContextSignal.apiVersion,
                     }).then((content) => {
                         if (content) {
                             mergeNewContent(content);
@@ -240,6 +238,7 @@ function EnableEditor(props) {
             mergeNewContent(props.content);
         }
     }, [props.content]);
+    useEffect(() => { }, [shouldSendResetCookie]);
     useEffect(() => {
         evaluateJsCode();
     }, [
@@ -261,18 +260,11 @@ function EnableEditor(props) {
         };
     }, []);
     return (React.createElement(builderContext.Provider, { value: props.builderContextSignal }, props.builderContextSignal.content ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": props.builderContextSignal.content?.id, "builder-model": props.model, key: forceReRenderCount, ...(TARGET === "reactNative"
-                ? {
-                    dataSet: {
-                        // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
-                        "builder-content-id": "",
-                    },
-                }
-                : {}), ...(props.hideContent
-                ? {
+        React.createElement("div", { key: forceReRenderCount, ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": props.builderContextSignal.content?.id, "builder-model": props.model, ...(props.showContent
+                ? {}
+                : {
                     hidden: true,
                     "aria-hidden": true,
-                }
-                : {}), className: props.classNameProp }, props.children))) : null));
+                }), className: props.classNameProp }, props.children))) : null));
 }
 export default EnableEditor;

package/dist/{sdk/components/content/components/content-styles.d.ts → components/content/components/styles.d.ts}

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
     contentId?: string;
 }
-import type { CustomFont } from "./content-styles.helpers";
+import type { CustomFont } from "./styles.helpers.js";
 declare function ContentStyles(props: Props): JSX.Element;
 export default ContentStyles;

package/dist/{sdk/components/content/components/content-styles.helpers.d.ts → components/content/components/styles.helpers.d.ts}

@@ -9,7 +9,7 @@ export interface CustomFont {
 export declare const getFontCss: ({ customFonts }: {
     customFonts?: CustomFont[];
 }) => string;
-export declare const getCss: ({ cssCode, contentId, }: {
+export declare const getCss: ({ cssCode, contentId }: {
     cssCode?: string;
     contentId?: string;
 }) => string;

package/dist/{sdk/components/content/components/content-styles.helpers.js → components/content/components/styles.helpers.js}

@@ -1,7 +1,6 @@
 const getCssFromFont = (font) => {
     // TODO: compute what font sizes are used and only load those.......
-    const family = font.family +
-        (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+    const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
     const name = family.split(',')[0];
     const url = font.fileUrl ?? font?.files?.regular;
     let str = '';
@@ -43,9 +42,9 @@ export const getFontCss = ({ customFonts }) => {
     //   return '';
     // }
     // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+    return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
 };
-export const getCss = ({ cssCode, contentId, }) => {
+export const getCss = ({ cssCode, contentId }) => {
     if (!cssCode) {
         return '';
     }

package/dist/{sdk/components/content/components/content-styles.js → components/content/components/styles.js}

@@ -1,9 +1,9 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState } from "react";
 import InlinedStyles from "../../inlined-styles";
-import { getCss } from "./content-styles.helpers";
-import { getFontCss } from "./content-styles.helpers";
+import { getCss } from "./styles.helpers.js";
+import { getFontCss } from "./styles.helpers.js";
 function ContentStyles(props) {
     const [injectedStyles, setInjectedStyles] = useState(() => `
 ${getCss({

package/dist/components/content/content.d.ts

@@ -0,0 +1,3 @@
+import type { ContentProps } from "./content.types.js";
+declare function ContentComponent(props: ContentProps): JSX.Element;
+export default ContentComponent;

package/dist/components/content/content.helpers.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+import type { ContentProps } from './content.types.js';
+export declare const getContextStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data }: Pick<ContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/dist/components/content/content.helpers.js

@@ -0,0 +1,30 @@
+export const getContextStateInitialValue = ({ content, data, locale }) => {
+    const defaultValues = {};
+    // set default values for content state inputs
+    content?.data?.inputs?.forEach(input => {
+        if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = {
+        ...content?.data?.state,
+        ...data,
+        ...(locale ? {
+            locale
+        } : {})
+    };
+    return {
+        ...defaultValues,
+        ...stateToUse
+    };
+};
+export const getContentInitialValue = ({ content, data }) => {
+    return !content ? undefined : {
+        ...content,
+        data: {
+            ...content?.data,
+            ...data
+        },
+        meta: content?.meta
+    };
+};

package/dist/{sdk/components → components}/content/content.js

@@ -1,20 +1,22 @@
-'use client';
+"use client";
 import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import { components } from "../../functions/register-component.js";
+import { components, serializeComponentInfo, } from "../../functions/register-component.js";
 import Blocks from "../blocks/blocks";
-import ContentStyles from "./components/content-styles";
+import ContentStyles from "./components/styles";
 import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
 import { TARGET } from "../../constants/target.js";
 import { getRenderContentScriptString } from "../content-variants/helpers.js";
-import { wrapComponentRef } from "./wrap-component-ref.js";
 import EnableEditor from "./components/enable-editor";
-function Content(props) {
+import InlinedScript from "../inlined-script";
+import ComponentsContext from "../../context/components.context";
+function ContentComponent(props) {
     const [scriptStr, setScriptStr] = useState(() => getRenderContentScriptString({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        variationId: props.content?.testVariationId,
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
         contentId: props.content?.id,
-        parentContentId: props.parentContentId,
     }));
     function contentSetState(newRootState) {
         setBuilderContextSignal((PREVIOUS_VALUE) => ({
@@ -22,7 +24,7 @@ function Content(props) {
             rootState: newRootState,
         }));
     }
-    const [customComps, setCustomComps] = useState(() => [
+    const [registeredComponents, setRegisteredComponents] = useState(() => [
         ...getDefaultRegisteredComponents(),
         // While this `components` object is deprecated, we must maintain support for it.
         // Since users are able to override our default components, we need to make sure that we do not break such
@@ -31,20 +33,13 @@ function Content(props) {
         // which is the new standard way of providing custom components, and must therefore take precedence.
         ...components,
         ...(props.customComponents || []),
-    ].reduce((acc, info) => ({
+    ].reduce((acc, { component, ...info }) => ({
         ...acc,
-        [info.name]: info,
+        [info.name]: {
+            component: component,
+            ...serializeComponentInfo(info),
+        },
     }), {}));
-    function customComponentsInfo() {
-        // TO-DO: fix once we remove `useStore<any>` hack in Qwik generator.
-        return Object.values(customComps).reduce((acc, { component: _, ...info }) => ({
-            ...acc,
-            [info.name]: info,
-        }), {});
-    }
-    function tempContextSignalSetter() {
-        return setBuilderContextSignal;
-    }
     const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
         content: getContentInitialValue({
             content: props.content,
@@ -56,11 +51,11 @@ function Content(props) {
             data: props.data,
             locale: props.locale,
         }),
-        rootSetState: undefined,
+        rootSetState: contentSetState,
         context: props.context || {},
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
-        registeredComponents: [
+        componentInfos: [
             ...getDefaultRegisteredComponents(),
             // While this `components` object is deprecated, we must maintain support for it.
             // Since users are able to override our default components, we need to make sure that we do not break such
@@ -69,29 +64,20 @@ function Content(props) {
             // which is the new standard way of providing custom components, and must therefore take precedence.
             ...components,
             ...(props.customComponents || []),
-        ].reduce((acc, { component, ...curr }) => ({
+        ].reduce((acc, { component: _, ...info }) => ({
             ...acc,
-            [curr.name]: {
-                component: TARGET === "vue3" ? wrapComponentRef(component) : component,
-                ...curr,
-            },
+            [info.name]: serializeComponentInfo(info),
         }), {}),
         inheritedStyles: {},
     }));
-    useEffect(() => {
-        if (!builderContextSignal.content) {
-            builderContextSignal.content = getContentInitialValue({
-                content: props.content,
-                data: props.data,
-            });
-        }
-    }, [props.content, props.data, props.locale]);
-    return (React.createElement(React.Fragment, null, builderContextSignal.content ? (React.createElement(React.Fragment, null,
-        React.createElement(EnableEditor, { content: props.content, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: customComponentsInfo(), canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, classNameProp: props.classNameProp, hideContent: props.hideContent, parentContentId: props.parentContentId, isSsrAbTest: props.isSsrAbTest, builderContextSignal: builderContextSignal, setBuilderContextSignal: tempContextSignalSetter() },
+    return (React.createElement(ComponentsContext.Provider, { value: {
+            registeredComponents: registeredComponents,
+        } },
+        React.createElement(EnableEditor, { content: props.content, model: props.model, context: props.context, apiKey: props.apiKey, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, classNameProp: props.classNameProp, showContent: props.showContent, builderContextSignal: builderContextSignal, setBuilderContextSignal: setBuilderContextSignal },
             props.isSsrAbTest ? (React.createElement(React.Fragment, null,
-                React.createElement("script", { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
+                React.createElement(InlinedScript, { scriptStr: scriptStr }))) : null,
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(ContentStyles, { contentId: builderContextSignal.content?.id, cssCode: builderContextSignal.content?.data?.cssCode, customFonts: builderContextSignal.content?.data?.customFonts }))) : null,
-            React.createElement(Blocks, { blocks: builderContextSignal.content?.data?.blocks, context: builderContextSignal, components: customComps })))) : null));
+            React.createElement(Blocks, { blocks: builderContextSignal.content?.data?.blocks, context: builderContextSignal, registeredComponents: registeredComponents }))));
 }
-export default Content;
+export default ContentComponent;

package/dist/{sdk/components/render-content/render-content.types.d.ts → components/content/content.types.d.ts}

@@ -1,6 +1,6 @@
-import type { BuilderRenderState } from '../../context/types';
-import type { EnforcePartials } from '../../types/enforced-partials';
-import type { RenderContentVariantsProps } from '../render-content-variants/render-content-variants.types';
+import type { BuilderRenderState } from '../../context/types.js';
+import type { EnforcePartials } from '../../types/enforced-partials.js';
+import type { ContentVariantsProps } from '../content-variants/content-variants.types.js';
 interface InternalRenderProps {
     /**
      * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
@@ -9,7 +9,7 @@ interface InternalRenderProps {
     showContent: boolean;
     isSsrAbTest: boolean;
 }
-export type RenderContentProps = InternalRenderProps & EnforcePartials<RenderContentVariantsProps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {

package/dist/components/content-variants/content-variants.d.ts

@@ -0,0 +1,9 @@
+type VariantsProviderProps = ContentVariantsProps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { ContentVariantsProps } from "./content-variants.types.js";
+declare function ContentVariants(props: VariantsProviderProps): JSX.Element;
+export default ContentVariants;

package/dist/{sdk/components/render-content-variants/render-content-variants.js → components/content-variants/content-variants.js}

@@ -1,45 +1,46 @@
-'use client';
+"use client";
 import * as React from "react";
 import { useState, useEffect } from "react";
-import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers";
-import RenderContent from "../render-content/render-content";
-import { getDefaultCanTrack } from "../../helpers/canTrack";
+import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
+import ContentComponent from "../content/content";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import InlinedStyles from "../inlined-styles";
-import { handleABTestingSync } from "../../helpers/ab-tests";
+import { handleABTestingSync } from "../../helpers/ab-tests.js";
 import InlinedScript from "../inlined-script";
-import { TARGET } from "../../constants/target";
-function RenderContentVariants(props) {
+import { TARGET } from "../../constants/target.js";
+function ContentVariants(props) {
     const [shouldRenderVariants, setShouldRenderVariants] = useState(() => checkShouldRunVariants({
         canTrack: getDefaultCanTrack(props.canTrack),
         content: props.content,
     }));
-    const [variantScriptStr, setVariantScriptStr] = useState(() => getVariantsScriptString(getVariants(props.content).map((value) => ({
-        id: value.testVariationId,
-        testRatio: value.testRatio,
-    })), props.content?.id || ""));
-    const [hideVariantsStyleString, setHideVariantsStyleString] = useState(() => getVariants(props.content)
-        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
-        .join(""));
+    function variantScriptStr() {
+        return getVariantsScriptString(getVariants(props.content).map((value) => ({
+            id: value.testVariationId,
+            testRatio: value.testRatio,
+        })), props.content?.id || "");
+    }
+    function hideVariantsStyleString() {
+        return getVariants(props.content)
+            .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+            .join("");
+    }
     useEffect(() => {
         /**
          * We unmount the non-winning variants post-hydration in Vue.
          */
-        if (TARGET === "vue2" || TARGET === "vue3") {
-            setShouldRenderVariants(false);
-        }
     }, []);
     return (React.createElement(React.Fragment, null,
         !props.__isNestedRender && TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
             React.createElement(InlinedScript, { scriptStr: getScriptString() }))) : null,
         shouldRenderVariants ? (React.createElement(React.Fragment, null,
-            React.createElement(InlinedStyles, { id: `variants-styles-${props.content?.id}`, styles: hideVariantsStyleString }),
-            React.createElement(InlinedScript, { scriptStr: variantScriptStr }),
-            getVariants(props.content)?.map((variant) => (React.createElement(RenderContent, { key: variant.testVariationId, content: variant, showContent: false, classNameProp: undefined, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants }))))) : null,
-        React.createElement(RenderContent, { ...{}, content: shouldRenderVariants
+            React.createElement(InlinedStyles, { id: `variants-styles-${props.content?.id}`, styles: hideVariantsStyleString() }),
+            React.createElement(InlinedScript, { scriptStr: variantScriptStr() }),
+            getVariants(props.content)?.map((variant) => (React.createElement(ContentComponent, { key: variant.testVariationId, content: variant, showContent: false, classNameProp: undefined, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants }))))) : null,
+        React.createElement(ContentComponent, { content: shouldRenderVariants
                 ? props.content
                 : handleABTestingSync({
                     item: props.content,
                     canTrack: getDefaultCanTrack(props.canTrack),
                 }), classNameProp: `variant-${props.content?.id}`, showContent: true, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants })));
 }
-export default RenderContentVariants;
+export default ContentVariants;

package/dist/{sdk/components/render-content-variants/render-content-variants.types.d.ts → components/content-variants/content-variants.types.d.ts}

@@ -1,8 +1,8 @@
-import type { BuilderRenderContext, RegisteredComponent } from '../../context/types';
-import type { ApiVersion } from '../../types/api-version';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-export interface RenderContentVariantsProps {
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types.js';
+import type { ApiVersion } from '../../types/api-version.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+export interface ContentVariantsProps {
     content?: Nullable<BuilderContent>;
     model?: string;
     data?: {

package/dist/{sdk/components/render-content-variants → components/content-variants}/helpers.d.ts

@@ -1,13 +1,13 @@
-import type { Nullable } from '../../helpers/nullable';
-import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
 export declare const getVariants: (content: Nullable<BuilderContent>) => {
     testVariationId: string;
     id: string;
     data?: {
         [key: string]: any;
         title?: string;
-        blocks?: import("../../types/builder-block").BuilderBlock[];
-        inputs?: import("../../types/input").Input[];
+        blocks?: import("../../types/builder-block.js").BuilderBlock[];
+        inputs?: import("../../types/input.js").Input[];
         state?: {
             [key: string]: any;
         };
@@ -21,10 +21,10 @@ export declare const getVariants: (content: Nullable<BuilderContent>) => {
     testRatio?: number;
     meta?: {
         [key: string]: any;
-        breakpoints?: import("../../types/builder-content").Breakpoints;
+        breakpoints?: import("../../types/builder-content.js").Breakpoints;
     };
 }[];
-export declare const checkShouldRunVariants: ({ canTrack, content, }: {
+export declare const checkShouldRunVariants: ({ canTrack, content }: {
     canTrack: Nullable<boolean>;
     content: Nullable<BuilderContent>;
 }) => boolean;
@@ -34,7 +34,7 @@ type VariantData = {
 };
 export declare const getScriptString: () => string;
 export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
-export declare const getRenderContentScriptString: ({ contentId, variationId, }: {
+export declare const getRenderContentScriptString: ({ contentId, variationId }: {
     variationId: string;
     contentId: string;
 }) => string;