@builder.io/sdk-react-native 0.4.4 → 0.4.5

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

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const helpers_1 = require("./helpers");
+const content_1 = __importDefault(require("../content/content"));
+const canTrack_1 = require("../../helpers/canTrack");
+const inlined_styles_1 = __importDefault(require("../inlined-styles"));
+const ab_tests_1 = require("../../helpers/ab-tests");
+function RenderContentVariants(props) {
+    var _a, _b, _c, _d, _e;
+    const [variantScriptStr, setVariantScriptStr] = (0, react_1.useState)(() => {
+        var _a;
+        return (0, helpers_1.getVariantsScriptString)((0, helpers_1.getVariants)(props.content).map((value) => ({
+            id: value.id,
+            testRatio: value.testRatio,
+        })), ((_a = props.content) === null || _a === void 0 ? void 0 : _a.id) || "");
+    });
+    const [shouldRenderVariants, setShouldRenderVariants] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
+        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
+        content: props.content,
+    }));
+    const [hideVariantsStyleString, setHideVariantsStyleString] = (0, react_1.useState)(() => (0, helpers_1.getVariants)(props.content)
+        .map((value) => `.variant-${value.id} { display: none; } `)
+        .join(""));
+    const [contentToRender, setContentToRender] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
+        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
+        content: props.content,
+    })
+        ? props.content
+        : (0, ab_tests_1.handleABTestingSync)({
+            item: props.content,
+            canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
+        }));
+    return (React.createElement(React.Fragment, null,
+        shouldRenderVariants ? (React.createElement(React.Fragment, null,
+            React.createElement(inlined_styles_1.default, { id: `variants-styles-${(_a = props.content) === null || _a === void 0 ? void 0 : _a.id}`, styles: hideVariantsStyleString }),
+            React.createElement(react_native_1.View, { id: `variants-script-${(_b = props.content) === null || _b === void 0 ? void 0 : _b.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }), (_c = (0, helpers_1.getVariants)(props.content)) === null || _c === void 0 ? void 0 :
+            _c.map((variant) => {
+                var _a;
+                return (React.createElement(content_1.default, { key: variant.id, content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, hideContent: true, parentContentId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.id, isSsrAbTest: shouldRenderVariants }));
+            }))) : null,
+        React.createElement(content_1.default, { model: props.model, content: contentToRender, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, classNameProp: `variant-${(_d = props.content) === null || _d === void 0 ? void 0 : _d.id}`, parentContentId: (_e = props.content) === null || _e === void 0 ? void 0 : _e.id, isSsrAbTest: shouldRenderVariants })));
+}
+exports.default = RenderContentVariants;

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

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVariantsScriptString = exports.getVariants = exports.getRenderContentScriptString = exports.checkShouldRunVariants = void 0;
+const target_1 = require("../../constants/target");
+const is_browser_1 = require("../../functions/is-browser");
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+exports.getVariants = getVariants;
+const checkShouldRunVariants = ({ canTrack, content }) => {
+    const hasVariants = getVariants(content).length > 0;
+    if (!hasVariants) {
+        return false;
+    }
+    if (!canTrack) {
+        return false;
+    }
+    if ((0, is_browser_1.isBrowser)()) {
+        return false;
+    }
+    return true;
+};
+exports.checkShouldRunVariants = checkShouldRunVariants;
+function bldrAbTest(contentId, variants, isHydrationTarget2) {
+    function getAndSetVariantId() {
+        function setCookie(name, value, days) {
+            let expires = "";
+            if (days) {
+                const date = new Date();
+                date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
+                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);
+        if (variantInCookie && availableIDs.includes(variantInCookie)) {
+            return variantInCookie;
+        }
+        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;
+            }
+        }
+        setCookie(cookieName, contentId);
+        return contentId;
+    }
+    const winningVariantId = getAndSetVariantId();
+    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    if (isHydrationTarget2) {
+        styleEl.remove();
+        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        thisScriptEl == null ? void 0 : thisScriptEl.remove();
+    }
+    else {
+        const newStyleStr = variants.concat({ id: contentId }).filter((variant) => variant.id !== winningVariantId).map((value) => {
+            return `.variant-${value.id} {  display: none; }
+        `;
+        }).join("");
+        styleEl.innerHTML = newStyleStr;
+    }
+}
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+    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);
+    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const variantIsDefaultContent = variantContentId === defaultContentId;
+    if (variantId === variantContentId) {
+        if (variantIsDefaultContent) {
+            return;
+        }
+        parentDiv == null ? void 0 : parentDiv.removeAttribute("hidden");
+        parentDiv == null ? void 0 : parentDiv.removeAttribute("aria-hidden");
+    }
+    else {
+        if (variantIsDefaultContent) {
+            if (isHydrationTarget2) {
+                parentDiv == null ? void 0 : parentDiv.remove();
+            }
+            else {
+                parentDiv == null ? void 0 : parentDiv.setAttribute("hidden", "true");
+                parentDiv == null ? void 0 : parentDiv.setAttribute("aria-hidden", "true");
+            }
+        }
+        return;
+    }
+    return;
+}
+const getIsHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const isHydrationTarget = getIsHydrationTarget(target_1.TARGET);
+const AB_TEST_FN_NAME = "bldrAbTest";
+const CONTENT_FN_NAME = "bldrCntntScrpt";
+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})
+  `;
+};
+exports.getVariantsScriptString = getVariantsScriptString;
+const getRenderContentScriptString = ({ parentContentId, contentId }) => {
+    return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};
+exports.getRenderContentScriptString = getRenderContentScriptString;

package/dist/components/inlined-script.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+function InlinedScript(props) {
+    return (React.createElement(react_native_1.View, { dangerouslySetInnerHTML: { __html: props.scriptStr }, id: props.id }));
+}
+exports.default = InlinedScript;

package/dist/components/{render-inlined-styles.js → inlined-styles.js}

@@ -26,7 +26,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-function RenderInlinedStyles(props) {
+function InlinedStyles(props) {
     return (React.createElement(react_native_1.View, { dangerouslySetInnerHTML: { __html: props.styles }, id: props.id }));
 }
-exports.default = RenderInlinedStyles;
+exports.default = InlinedStyles;

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

@@ -34,7 +34,7 @@ const target_js_1 = require("../../constants/target.js");
 const get_processed_block_js_1 = require("../../functions/get-processed-block.js");
 const css_js_1 = require("../../helpers/css.js");
 const nullable_js_1 = require("../../helpers/nullable.js");
-const render_inlined_styles_1 = __importDefault(require("../render-inlined-styles"));
+const inlined_styles_1 = __importDefault(require("../inlined-styles"));
 function BlockStyles(props) {
     function useBlock() {
         return (0, get_processed_block_js_1.getProcessedBlock)({
@@ -91,6 +91,6 @@ function BlockStyles(props) {
         return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
     }
     return (React.createElement(React.Fragment, null, target_js_1.TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
-        React.createElement(render_inlined_styles_1.default, { styles: css() }))) : null));
+        React.createElement(inlined_styles_1.default, { styles: css() }))) : null));
 }
 exports.default = BlockStyles;

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

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_1 = require("react");
-const render_inlined_styles_1 = __importDefault(require("../../render-inlined-styles"));
+const inlined_styles_1 = __importDefault(require("../../inlined-styles"));
 const render_styles_helpers_1 = require("./render-styles.helpers");
 const render_styles_helpers_2 = require("./render-styles.helpers");
 function RenderContentStyles(props) {
@@ -56,6 +56,6 @@ ${(0, render_styles_helpers_2.getFontCss)({
   font-family: inherit;
 }
 `.trim());
-    return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles });
+    return React.createElement(inlined_styles_1.default, { styles: injectedStyles });
 }
 exports.default = RenderContentStyles;

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

@@ -50,6 +50,7 @@ const target_js_1 = require("../../constants/target.js");
 const logger_js_1 = require("../../helpers/logger.js");
 const helpers_js_1 = require("../render-content-variants/helpers.js");
 const wrap_component_ref_js_1 = require("./wrap-component-ref.js");
+const inlined_script_1 = __importDefault(require("../inlined-script"));
 function RenderContent(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const elementRef = (0, react_1.useRef)(null);
@@ -208,11 +209,12 @@ function RenderContent(props) {
         }
     }
     const [scriptStr, setScriptStr] = (0, react_1.useState)(() => {
-        var _a;
+        var _a, _b;
         return (0, helpers_js_1.getRenderContentScriptString)({
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-            contentId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.id,
-            parentContentId: props.parentContentId,
+            variationId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.testVariationId,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+            contentId: (_b = props.content) === null || _b === void 0 ? void 0 : _b.id,
         });
     });
     const [builderContextSignal, setBuilderContextSignal] = (0, react_1.useState)(() => ({
@@ -358,14 +360,14 @@ function RenderContent(props) {
                         "builder-content-id": "",
                     },
                 }
-                : {}), ...(props.hideContent
-                ? {
+                : {}), ...(props.showContent
+                ? {}
+                : {
                     hidden: true,
                     "aria-hidden": true,
-                }
-                : {}) },
+                }) },
             props.isSsrAbTest ? (React.createElement(React.Fragment, null,
-                React.createElement(react_native_1.ScrollView, { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
+                React.createElement(inlined_script_1.default, { scriptStr: scriptStr }))) : null,
             target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(render_styles_1.default, { contentId: (_f = builderContextSignal.content) === null || _f === void 0 ? void 0 : _f.id, cssCode: (_h = (_g = builderContextSignal.content) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.cssCode, customFonts: (_k = (_j = builderContextSignal.content) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.customFonts }))) : null,
             React.createElement(render_blocks_1.default, { blocks: (_m = (_l = builderContextSignal.content) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.blocks, key: forceReRenderCount })))) : null));

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

@@ -1,25 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getVariantsScriptString = exports.getVariants = exports.getRenderContentScriptString = exports.checkShouldRunVariants = void 0;
+exports.getVariantsScriptString = exports.getVariants = exports.getScriptString = exports.getRenderContentScriptString = exports.checkShouldRunVariants = void 0;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(b)) {
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const target_1 = require("../../constants/target");
 const is_browser_1 = require("../../functions/is-browser");
-const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {}).map((variant) => __spreadProps(__spreadValues({}, variant), {
+    testVariationId: variant.id,
+    id: content == null ? void 0 : content.id
+}));
 exports.getVariants = getVariants;
 const checkShouldRunVariants = ({ canTrack, content }) => {
     const hasVariants = getVariants(content).length > 0;
-    if (!hasVariants) {
+    if (target_1.TARGET === "reactNative")
         return false;
-    }
-    if (!canTrack) {
+    if (!hasVariants)
         return false;
-    }
-    if ((0, is_browser_1.isBrowser)()) {
+    if (!canTrack)
+        return false;
+    if (target_1.TARGET === "vue2" || target_1.TARGET === "vue3")
+        return true;
+    if ((0, is_browser_1.isBrowser)())
         return false;
-    }
     return true;
 };
 exports.checkShouldRunVariants = checkShouldRunVariants;
 function bldrAbTest(contentId, variants, isHydrationTarget2) {
+    var _a;
     function getAndSetVariantId() {
         function setCookie(name, value, days) {
             let expires = "";
@@ -63,10 +87,10 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    const styleEl = (_a = document.currentScript) == null ? void 0 : _a.previousElementSibling;
     if (isHydrationTarget2) {
         styleEl.remove();
-        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        const thisScriptEl = document.currentScript;
         thisScriptEl == null ? void 0 : thisScriptEl.remove();
     }
     else {
@@ -78,6 +102,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
     }
 }
 function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+    var _a;
     if (!navigator.cookieEnabled) {
         return;
     }
@@ -95,7 +120,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
     }
     const cookieName = `builder.tests.${defaultContentId}`;
     const variantId = getCookie(cookieName);
-    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const parentDiv = (_a = document.currentScript) == null ? void 0 : _a.parentElement;
     const variantIsDefaultContent = variantContentId === defaultContentId;
     if (variantId === variantContentId) {
         if (variantIsDefaultContent) {
@@ -118,22 +143,26 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
     }
     return;
 }
-const getIsHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const getIsHydrationTarget = (target) => target === "react" || target === "reactNative";
 const isHydrationTarget = getIsHydrationTarget(target_1.TARGET);
-const AB_TEST_FN_NAME = "bldrAbTest";
-const CONTENT_FN_NAME = "bldrCntntScrpt";
-const getVariantsScriptString = (variants, contentId) => {
+const AB_TEST_FN_NAME = "builderIoAbTest";
+const CONTENT_FN_NAME = "builderIoRenderContent";
+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}
   `;
 };
+exports.getScriptString = getScriptString;
+const getVariantsScriptString = (variants, contentId) => {
+    return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
 exports.getVariantsScriptString = getVariantsScriptString;
-const getRenderContentScriptString = ({ parentContentId, contentId }) => {
+const getRenderContentScriptString = ({ contentId, variationId }) => {
     return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };
 exports.getRenderContentScriptString = getRenderContentScriptString;

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

@@ -33,41 +33,46 @@ const react_1 = require("react");
 const helpers_1 = require("./helpers");
 const render_content_1 = __importDefault(require("../render-content/render-content"));
 const canTrack_1 = require("../../helpers/canTrack");
-const render_inlined_styles_1 = __importDefault(require("../render-inlined-styles"));
+const inlined_styles_1 = __importDefault(require("../inlined-styles"));
 const ab_tests_1 = require("../../helpers/ab-tests");
+const inlined_script_1 = __importDefault(require("../inlined-script"));
+const target_1 = require("../../constants/target");
 function RenderContentVariants(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
+    const [shouldRenderVariants, setShouldRenderVariants] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
+        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
+        content: props.content,
+    }));
     const [variantScriptStr, setVariantScriptStr] = (0, react_1.useState)(() => {
         var _a;
         return (0, helpers_1.getVariantsScriptString)((0, helpers_1.getVariants)(props.content).map((value) => ({
-            id: value.id,
+            id: value.testVariationId,
             testRatio: value.testRatio,
         })), ((_a = props.content) === null || _a === void 0 ? void 0 : _a.id) || "");
     });
-    const [shouldRenderVariants, setShouldRenderVariants] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
-        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
-        content: props.content,
-    }));
     const [hideVariantsStyleString, setHideVariantsStyleString] = (0, react_1.useState)(() => (0, helpers_1.getVariants)(props.content)
-        .map((value) => `.variant-${value.id} { display: none; } `)
+        .map((value) => `.variant-${value.testVariationId} { display: none; } `)
         .join(""));
-    const [contentToRender, setContentToRender] = (0, react_1.useState)(() => (0, helpers_1.checkShouldRunVariants)({
-        canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
-        content: props.content,
-    })
-        ? props.content
-        : (0, ab_tests_1.handleABTestingSync)({
-            item: props.content,
-            canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
-        }));
+    (0, react_1.useEffect)(() => {
+        /**
+         * We unmount the non-winning variants post-hydration in Vue.
+         */
+        if (target_1.TARGET === "vue2" || target_1.TARGET === "vue3") {
+            setShouldRenderVariants(false);
+        }
+    }, []);
     return (React.createElement(React.Fragment, null,
+        !props.__isNestedRender && target_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+            React.createElement(inlined_script_1.default, { scriptStr: (0, helpers_1.getScriptString)() }))) : null,
         shouldRenderVariants ? (React.createElement(React.Fragment, null,
-            React.createElement(render_inlined_styles_1.default, { id: `variants-styles-${(_a = props.content) === null || _a === void 0 ? void 0 : _a.id}`, styles: hideVariantsStyleString }),
-            React.createElement(react_native_1.View, { id: `variants-script-${(_b = props.content) === null || _b === void 0 ? void 0 : _b.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }), (_c = (0, helpers_1.getVariants)(props.content)) === null || _c === void 0 ? void 0 :
-            _c.map((variant) => {
-                var _a;
-                return (React.createElement(render_content_1.default, { key: variant.id, content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, hideContent: true, parentContentId: (_a = props.content) === null || _a === void 0 ? void 0 : _a.id, isSsrAbTest: shouldRenderVariants }));
-            }))) : null,
-        React.createElement(render_content_1.default, { model: props.model, content: contentToRender, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents, classNameProp: `variant-${(_d = props.content) === null || _d === void 0 ? void 0 : _d.id}`, parentContentId: (_e = props.content) === null || _e === void 0 ? void 0 : _e.id, isSsrAbTest: shouldRenderVariants })));
+            React.createElement(inlined_styles_1.default, { id: `variants-styles-${(_a = props.content) === null || _a === void 0 ? void 0 : _a.id}`, styles: hideVariantsStyleString }),
+            React.createElement(inlined_script_1.default, { scriptStr: variantScriptStr }), (_b = (0, helpers_1.getVariants)(props.content)) === null || _b === void 0 ? void 0 :
+            _b.map((variant) => (React.createElement(render_content_1.default, { 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(render_content_1.default, { ...{}, content: shouldRenderVariants
+                ? props.content
+                : (0, ab_tests_1.handleABTestingSync)({
+                    item: props.content,
+                    canTrack: (0, canTrack_1.getDefaultCanTrack)(props.canTrack),
+                }), classNameProp: `variant-${(_c = props.content) === null || _c === void 0 ? void 0 : _c.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 })));
 }
 exports.default = RenderContentVariants;

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

@@ -0,0 +1 @@
+"use strict";

package/dist/constants/sdk-version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_VERSION = void 0;
-exports.SDK_VERSION = "0.4.4";
+exports.SDK_VERSION = "0.4.5";

package/dist/helpers/ab-tests.js

@@ -42,6 +42,7 @@ var __async = (__this, __arguments, generator) => {
 const cookie_js_1 = require("./cookie.js");
 const nullable_js_1 = require("../helpers/nullable.js");
 const logger_js_1 = require("./logger.js");
+const target_js_1 = require("../constants/target.js");
 const BUILDER_STORE_PREFIX = "builder.tests";
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
 const getContentVariationCookie = ({ contentId }) => (0, cookie_js_1.getCookie)({ name: getContentTestKey(contentId), canTrack: true });
@@ -88,6 +89,8 @@ const getTestFields = ({ item, testGroupId }) => {
     }
 };
 const handleABTestingSync = ({ item, canTrack }) => {
+    if (target_js_1.TARGET === "reactNative")
+        return item;
     if (!canTrack) {
         return item;
     }

package/dist/types/builder-props.js

@@ -0,0 +1 @@
+"use strict";

package/dist/types/enforced-partials.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/blocks/columns/columns.jsx

@@ -11,7 +11,7 @@ import {
 import { useState, useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles";
+import InlinedStyles from "../../components/inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
 
@@ -145,7 +145,7 @@ function Columns(props) {
     >
       {TARGET !== "reactNative" ? (
         <>
-          <RenderInlinedStyles styles={columnsStyles()} />
+          <InlinedStyles styles={columnsStyles()} />
         </>
       ) : null}
 

package/src/blocks/symbol/symbol.jsx

@@ -9,7 +9,7 @@ import {
   Text,
 } from "react-native";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content";
+import RenderContentVariants from "../../components/render-content-variants/render-content-variants";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
@@ -53,9 +53,11 @@ function Symbol(props) {
         model: props.symbol.model,
         apiKey: builderContext.apiKey,
         apiVersion: builderContext.apiVersion,
-        query: {
-          id: props.symbol.entry,
-        },
+        ...(props.symbol?.entry && {
+          query: {
+            id: props.symbol.entry,
+          },
+        }),
       })
         .then((response) => {
           if (response) {
@@ -85,7 +87,8 @@ function Symbol(props) {
         class: className,
       }}
     >
-      <RenderContent
+      <RenderContentVariants
+        __isNestedRender={true}
         apiVersion={builderContext.apiVersion}
         apiKey={builderContext.apiKey}
         context={builderContext.context}

package/src/components/inlined-script.jsx

@@ -0,0 +1,18 @@
+'use client';
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
+
+function InlinedScript(props) {
+  return (
+    <View dangerouslySetInnerHTML={{ __html: props.scriptStr }} id={props.id} />
+  );
+}
+
+export default InlinedScript;