@builder.io/sdk-react 0.4.3 → 0.4.5

package/dist/sdk/components/content-variants/helpers.js

@@ -0,0 +1,184 @@
+import { TARGET } from '../../constants/target';
+import { isBrowser } from '../../functions/is-browser';
+export const getVariants = (content) => Object.values(content?.variations || {});
+export const checkShouldRunVariants = ({ canTrack, content, }) => {
+    const hasVariants = getVariants(content).length > 0;
+    if (!hasVariants) {
+        return false;
+    }
+    if (!canTrack) {
+        return false;
+    }
+    if (isBrowser()) {
+        return false;
+    }
+    return true;
+};
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrAbTest(contentId, variants, isHydrationTarget) {
+    function getAndSetVariantId() {
+        function setCookie(name, value, days) {
+            let expires = '';
+            if (days) {
+                const date = new Date();
+                date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+                expires = '; expires=' + date.toUTCString();
+            }
+            document.cookie =
+                name +
+                    '=' +
+                    (value || '') +
+                    expires +
+                    '; path=/' +
+                    '; Secure; SameSite=None';
+        }
+        function getCookie(name) {
+            const nameEQ = name + '=';
+            const ca = document.cookie.split(';');
+            for (let i = 0; i < ca.length; i++) {
+                let c = ca[i];
+                while (c.charAt(0) === ' ')
+                    c = c.substring(1, c.length);
+                if (c.indexOf(nameEQ) === 0)
+                    return c.substring(nameEQ.length, c.length);
+            }
+            return null;
+        }
+        const cookieName = `builder.tests.${contentId}`;
+        const variantInCookie = getCookie(cookieName);
+        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        /**
+         * cookie already exists
+         */
+        if (variantInCookie && availableIDs.includes(variantInCookie)) {
+            return variantInCookie;
+        }
+        /**
+         * no cookie exists, find variant
+         */
+        let n = 0;
+        const random = Math.random();
+        for (let i = 0; i < variants.length; i++) {
+            const variant = variants[i];
+            const testRatio = variant.testRatio;
+            n += testRatio;
+            if (random < n) {
+                setCookie(cookieName, variant.id);
+                return variant.id;
+            }
+        }
+        /**
+         * no variant found, assign default content
+         */
+        setCookie(cookieName, contentId);
+        return contentId;
+    }
+    const winningVariantId = getAndSetVariantId();
+    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    /**
+     * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
+     */
+    if (isHydrationTarget) {
+        styleEl.remove();
+        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        thisScriptEl?.remove();
+    }
+    else {
+        /* update styles to hide all variants except the winning variant */
+        const newStyleStr = variants
+            .concat({ id: contentId })
+            .filter((variant) => variant.id !== winningVariantId)
+            .map((value) => {
+            return `.variant-${value.id} {  display: none; }
+        `;
+        })
+            .join('');
+        /* TO-DO: check if this actually updates the style */
+        styleEl.innerHTML = newStyleStr;
+    }
+}
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
+    if (!navigator.cookieEnabled) {
+        return;
+    }
+    function getCookie(name) {
+        const nameEQ = name + '=';
+        const ca = document.cookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) === ' ')
+                c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) === 0)
+                return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+    }
+    const cookieName = `builder.tests.${defaultContentId}`;
+    const variantId = getCookie(cookieName);
+    /** get parent div by searching on `builder-content-id` attr */
+    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const variantIsDefaultContent = variantContentId === defaultContentId;
+    if (variantId === variantContentId) {
+        if (variantIsDefaultContent) {
+            /** the default content is already visible, no need to do anything */
+            return;
+        }
+        /** this is the winning variant and not already visible: remove `hidden` and `aria-hidden` attr */
+        parentDiv?.removeAttribute('hidden');
+        parentDiv?.removeAttribute('aria-hidden');
+    }
+    else {
+        if (variantIsDefaultContent) {
+            if (isHydrationTarget) {
+                /**
+                 * For React to work, we need to support hydration, in which case the first CSR will have none of the hidden variants.
+                 * So we completely remove that node.
+                 */
+                parentDiv?.remove();
+            }
+            else {
+                /** this is not the winning variant, add `hidden` attr */
+                parentDiv?.setAttribute('hidden', 'true');
+                parentDiv?.setAttribute('aria-hidden', 'true');
+            }
+        }
+        /** This is not the winning variant, and it's not the default content.
+         * There's no need to hide it, because it's already hidden.
+         */
+        return;
+    }
+    return;
+}
+const getIsHydrationTarget = (target) => target === 'react' ||
+    target === 'reactNative' ||
+    target === 'vue3' ||
+    target === 'vue2';
+const isHydrationTarget = getIsHydrationTarget(TARGET);
+/**
+ * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
+ * Some bundlers will minify the fn name, etc.
+ *
+ * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
+ */
+const AB_TEST_FN_NAME = 'bldrAbTest';
+const CONTENT_FN_NAME = 'bldrCntntScrpt';
+export const getVariantsScriptString = (variants, contentId) => {
+    const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
+    const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
+    return `
+  const ${AB_TEST_FN_NAME} = ${fnStr}
+  const ${CONTENT_FN_NAME} = ${fnStr2}
+  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  `;
+};
+export const getRenderContentScriptString = ({ parentContentId, contentId, }) => {
+    return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};

package/dist/sdk/components/inlined-script.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    scriptStr: string;
+    id?: string;
+}
+declare function InlinedScript(props: Props): JSX.Element;
+export default InlinedScript;

package/dist/sdk/components/inlined-script.js

@@ -0,0 +1,6 @@
+'use client';
+import * as React from "react";
+function InlinedScript(props) {
+    return (React.createElement("script", { dangerouslySetInnerHTML: { __html: props.scriptStr }, id: props.id }));
+}
+export default InlinedScript;

package/dist/sdk/components/inlined-styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    styles: string;
+    id?: string;
+}
+declare function InlinedStyles(props: Props): JSX.Element;
+export default InlinedStyles;

package/dist/sdk/components/inlined-styles.js

@@ -0,0 +1,6 @@
+'use client';
+import * as React from "react";
+function InlinedStyles(props) {
+    return (React.createElement("style", { dangerouslySetInnerHTML: { __html: props.styles }, id: props.id }));
+}
+export default InlinedStyles;

package/dist/sdk/components/render-block/block-styles.js

@@ -5,7 +5,7 @@ import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
-import RenderInlinedStyles from "../render-inlined-styles";
+import InlinedStyles from "../inlined-styles";
 function BlockStyles(props) {
     function useBlock() {
         return getProcessedBlock({
@@ -61,6 +61,6 @@ function BlockStyles(props) {
         return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
     }
     return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
-        React.createElement(RenderInlinedStyles, { styles: css() }))) : null));
+        React.createElement(InlinedStyles, { styles: css() }))) : null));
 }
 export default BlockStyles;

package/dist/sdk/components/render-content/components/render-styles.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { useState } from "react";
-import RenderInlinedStyles from "../../render-inlined-styles";
+import InlinedStyles from "../../inlined-styles";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 function RenderContentStyles(props) {
@@ -27,6 +27,6 @@ ${getFontCss({
   font-family: inherit;
 }
 `.trim());
-    return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
+    return React.createElement(InlinedStyles, { styles: injectedStyles });
 }
 export default RenderContentStyles;

package/dist/sdk/components/render-content/render-content.js

@@ -21,6 +21,7 @@ import { TARGET } from "../../constants/target.js";
 import { logger } from "../../helpers/logger.js";
 import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
 import { wrapComponentRef } from "./wrap-component-ref.js";
+import InlinedScript from "../inlined-script";
 function RenderContent(props) {
     const elementRef = useRef(null);
     const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
@@ -181,9 +182,10 @@ function RenderContent(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,
     }));
     const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
         content: getContentInitialValue({
@@ -326,14 +328,14 @@ function RenderContent(props) {
                         "builder-content-id": "",
                     },
                 }
-                : {}), ...(props.hideContent
-                ? {
+                : {}), ...(props.showContent
+                ? {}
+                : {
                     hidden: true,
                     "aria-hidden": true,
-                }
-                : {}), className: props.classNameProp },
+                }), className: props.classNameProp },
             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(RenderContentStyles, { contentId: builderContextSignal.content?.id, cssCode: builderContextSignal.content?.data?.cssCode, customFonts: builderContextSignal.content?.data?.customFonts }))) : null,
             React.createElement(RenderBlocks, { blocks: builderContextSignal.content?.data?.blocks, key: forceReRenderCount })))) : null));

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

@@ -1,30 +1,15 @@
-import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { ApiVersion } from '../../types/api-version';
-export interface RenderContentProps {
-    content?: Nullable<BuilderContent>;
-    model?: string;
-    data?: {
-        [key: string]: any;
-    };
-    context?: BuilderRenderContext;
-    apiKey: string;
-    apiVersion?: ApiVersion;
-    customComponents?: RegisteredComponent[];
-    canTrack?: boolean;
-    locale?: string;
-    /** @deprecated use `enrich` instead **/
-    includeRefs?: boolean;
-    enrich?: boolean;
+import type { BuilderRenderState } from '../../context/types';
+import type { EnforcePartials } from '../../types/enforced-partials';
+import type { RenderContentVariantsProps } from '../render-content-variants/render-content-variants.types';
+interface InternalRenderProps {
     /**
      * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
      */
-    classNameProp?: string;
-    hideContent?: boolean;
-    parentContentId?: string;
-    isSsrAbTest?: boolean;
+    classNameProp: string | undefined;
+    showContent: boolean;
+    isSsrAbTest: boolean;
 }
+export type RenderContentProps = InternalRenderProps & EnforcePartials<RenderContentVariantsProps>;
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {
@@ -36,3 +21,4 @@ export interface BuilderComponentStateChange {
         };
     };
 }
+export {};

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

@@ -1,6 +1,29 @@
 import type { Nullable } from '../../helpers/nullable';
 import type { BuilderContent } from '../../types/builder-content';
-export declare const getVariants: (content: Nullable<BuilderContent>) => import("../../types/builder-content").BuilderContentVariation[];
+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[];
+        state?: {
+            [key: string]: any;
+        };
+        jsCode?: string;
+        tsCode?: string;
+        httpRequests?: {
+            [key: string]: string;
+        };
+    };
+    name?: string;
+    testRatio?: number;
+    meta?: {
+        [key: string]: any;
+        breakpoints?: import("../../types/builder-content").Breakpoints;
+    };
+}[];
 export declare const checkShouldRunVariants: ({ canTrack, content, }: {
     canTrack: Nullable<boolean>;
     content: Nullable<BuilderContent>;
@@ -9,9 +32,10 @@ type VariantData = {
     id: string;
     testRatio?: number;
 };
+export declare const getScriptString: () => string;
 export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
-export declare const getRenderContentScriptString: ({ parentContentId, contentId, }: {
+export declare const getRenderContentScriptString: ({ contentId, variationId, }: {
+    variationId: string;
     contentId: string;
-    parentContentId: string;
 }) => string;
 export {};

package/dist/sdk/components/render-content-variants/helpers.js

@@ -1,17 +1,32 @@
 import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
-export const getVariants = (content) => Object.values(content?.variations || {});
+export const getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
+    ...variant,
+    testVariationId: variant.id,
+    id: content?.id,
+}));
 export const checkShouldRunVariants = ({ canTrack, content, }) => {
     const hasVariants = getVariants(content).length > 0;
-    if (!hasVariants) {
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
         return false;
-    }
-    if (!canTrack) {
+    if (!hasVariants)
         return false;
-    }
-    if (isBrowser()) {
+    if (!canTrack)
+        return false;
+    /**
+     * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+     * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
+     * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
+     *
+     * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+     */
+    if (TARGET === 'vue2' || TARGET === 'vue3')
+        return true;
+    if (isBrowser())
         return false;
-    }
     return true;
 };
 /**
@@ -77,13 +92,14 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    const styleEl = document.currentScript
+        ?.previousElementSibling;
     /**
      * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
      */
     if (isHydrationTarget) {
         styleEl.remove();
-        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        const thisScriptEl = document.currentScript;
         thisScriptEl?.remove();
     }
     else {
@@ -96,7 +112,6 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         `;
         })
             .join('');
-        /* TO-DO: check if this actually updates the style */
         styleEl.innerHTML = newStyleStr;
     }
 }
@@ -122,8 +137,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     const cookieName = `builder.tests.${defaultContentId}`;
     const variantId = getCookie(cookieName);
-    /** get parent div by searching on `builder-content-id` attr */
-    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const parentDiv = document.currentScript?.parentElement;
     const variantIsDefaultContent = variantContentId === defaultContentId;
     if (variantId === variantContentId) {
         if (variantIsDefaultContent) {
@@ -156,10 +170,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     return;
 }
-const getIsHydrationTarget = (target) => target === 'react' ||
-    target === 'reactNative' ||
-    target === 'vue3' ||
-    target === 'vue2';
+const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 /**
  * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
@@ -167,18 +178,21 @@ const isHydrationTarget = getIsHydrationTarget(TARGET);
  *
  * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
  */
-const AB_TEST_FN_NAME = 'bldrAbTest';
-const CONTENT_FN_NAME = 'bldrCntntScrpt';
-export const getVariantsScriptString = (variants, contentId) => {
+const AB_TEST_FN_NAME = 'builderIoAbTest';
+const CONTENT_FN_NAME = 'builderIoRenderContent';
+export const getScriptString = () => {
     const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
     const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
     return `
-  const ${AB_TEST_FN_NAME} = ${fnStr}
-  const ${CONTENT_FN_NAME} = ${fnStr2}
-  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
-export const getRenderContentScriptString = ({ parentContentId, contentId, }) => {
+export const getVariantsScriptString = (variants, contentId) => {
+    return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
+export const getRenderContentScriptString = ({ contentId, variationId, }) => {
     return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };

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

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-type VariantsProviderProps = RenderContentProps;
-import type { RenderContentProps } from "../render-content/render-content.types";
+type VariantsProviderProps = RenderContentVariantsProps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { RenderContentVariantsProps } from "./render-content-variants.types";
 declare function RenderContentVariants(props: VariantsProviderProps): JSX.Element;
 export default RenderContentVariants;

package/dist/sdk/components/render-content-variants/render-content-variants.js

@@ -1,37 +1,45 @@
 'use client';
 import * as React from "react";
-import { useState } from "react";
-import { checkShouldRunVariants, getVariants, getVariantsScriptString, } from "./helpers";
+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 RenderInlinedStyles from "../render-inlined-styles";
+import InlinedStyles from "../inlined-styles";
 import { handleABTestingSync } from "../../helpers/ab-tests";
+import InlinedScript from "../inlined-script";
+import { TARGET } from "../../constants/target";
 function RenderContentVariants(props) {
-    const [variantScriptStr, setVariantScriptStr] = useState(() => getVariantsScriptString(getVariants(props.content).map((value) => ({
-        id: value.id,
-        testRatio: value.testRatio,
-    })), props.content?.id || ""));
     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.id} { display: none; } `)
+        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
         .join(""));
-    const [contentToRender, setContentToRender] = useState(() => checkShouldRunVariants({
-        canTrack: getDefaultCanTrack(props.canTrack),
-        content: props.content,
-    })
-        ? props.content
-        : handleABTestingSync({
-            item: props.content,
-            canTrack: getDefaultCanTrack(props.canTrack),
-        }));
+    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(RenderInlinedStyles, { id: `variants-styles-${props.content?.id}`, styles: hideVariantsStyleString }),
-            React.createElement("script", { id: `variants-script-${props.content?.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }),
-            getVariants(props.content)?.map((variant) => (React.createElement(RenderContent, { key: variant.id, content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, hideContent: true, parentContentId: props.content?.id, isSsrAbTest: shouldRenderVariants }))))) : null,
-        React.createElement(RenderContent, { model: props.model, content: contentToRender, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, classNameProp: `variant-${props.content?.id}`, parentContentId: props.content?.id, isSsrAbTest: shouldRenderVariants })));
+            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
+                ? 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;

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

@@ -0,0 +1,20 @@
+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 {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    apiVersion?: ApiVersion;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    /** @deprecated use `enrich` instead **/
+    includeRefs?: boolean;
+    enrich?: boolean;
+}

package/dist/sdk/components/render-content-variants/render-content-variants.types.js

@@ -0,0 +1 @@
+export {};

package/dist/sdk/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.3";
+export declare const SDK_VERSION = "0.4.5";

package/dist/sdk/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.3";
+export const SDK_VERSION = "0.4.5";

package/dist/sdk/functions/track/index.js

@@ -43,7 +43,7 @@ export async function _track(eventProps) {
     if (!(isBrowser() || TARGET === 'reactNative')) {
         return;
     }
-    return fetch(`https://builder.io/api/v1/track`, {
+    return fetch(`https://cdn.builder.io/api/v1/track`, {
         method: 'POST',
         body: JSON.stringify({
             events: [await createEvent(eventProps)],

package/dist/sdk/helpers/ab-tests.js

@@ -1,6 +1,7 @@
 import { getCookie, getCookieSync, setCookie } from './cookie.js';
 import { checkIsDefined } from '../helpers/nullable.js';
 import { logger } from './logger.js';
+import { TARGET } from '../constants/target.js';
 const BUILDER_STORE_PREFIX = 'builder.tests';
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
 const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
@@ -59,6 +60,11 @@ const getTestFields = ({ item, testGroupId, }) => {
     }
 };
 export const handleABTestingSync = ({ item, canTrack, }) => {
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
+        return item;
     if (!canTrack) {
         return item;
     }

package/dist/sdk/types/builder-props.d.ts

@@ -0,0 +1,10 @@
+import type { BuilderContextInterface, RegisteredComponent } from '../context/types';
+import type { BuilderBlock } from './builder-block';
+import type { Dictionary } from './typescript';
+export type PropsWithBuilderData<T> = T & {
+    builderBlock: BuilderBlock;
+    builderContext: BuilderContextInterface;
+};
+export type BuilderComponentsProp = {
+    builderComponents: Dictionary<RegisteredComponent>;
+};

package/dist/sdk/types/builder-props.js

@@ -0,0 +1 @@
+export {};