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

package/dist/components/content/builder-editing.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 BuilderEditing(props) {
+    return React.createElement(react_native_1.View, null);
+}
+exports.default = BuilderEditing;

package/dist/components/content/components/enable-editor.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"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);
@@ -30,27 +30,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_1 = require("react");
-const evaluate_js_1 = require("../../../functions/evaluate.js");
-const index_js_1 = require("../../../functions/get-content/index.js");
+const evaluate_1 = require("../../../functions/evaluate");
 const get_fetch_js_1 = require("../../../functions/get-fetch.js");
 const is_browser_js_1 = require("../../../functions/is-browser.js");
 const is_editing_js_1 = require("../../../functions/is-editing.js");
-const is_previewing_js_1 = require("../../../functions/is-previewing.js");
 const register_component_js_1 = require("../../../functions/register-component.js");
-const index_js_2 = require("../../../functions/track/index.js");
-const builder_context_js_1 = __importDefault(require("../../../context/builder.context.js"));
+const index_js_1 = require("../../../functions/track/index.js");
+const builder_context_1 = __importDefault(require("../../../context/builder.context"));
 const init_editing_js_1 = require("../../../scripts/init-editing.js");
 const nullable_js_1 = require("../../../helpers/nullable.js");
 const interaction_js_1 = require("../../../functions/track/interaction.js");
-const target_js_1 = require("../../../constants/target.js");
 const logger_js_1 = require("../../../helpers/logger.js");
+const index_js_2 = require("../../../functions/get-content/index.js");
+const is_previewing_js_1 = require("../../../functions/is-previewing.js");
+const set_js_1 = require("../../../helpers/preview-lru-cache/set.js");
 function EnableEditor(props) {
     var _a, _b, _c, _d, _e;
     const elementRef = (0, react_1.useRef)(null);
+    const [canTrackToUse, setCanTrackToUse] = (0, react_1.useState)(() => (0, nullable_js_1.checkIsDefined)(props.canTrack) ? props.canTrack : true);
     const [forceReRenderCount, setForceReRenderCount] = (0, react_1.useState)(() => 0);
     function mergeNewContent(newContent) {
         var _a, _b, _c, _d, _e;
-        props.builderContextSignal.content = {
+        const newContentValue = {
             ...props.builderContextSignal.content,
             ...newContent,
             data: {
@@ -64,8 +65,10 @@ function EnableEditor(props) {
                     ((_e = (_d = props.builderContextSignal.content) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.breakpoints),
             },
         };
+        props.builderContextSignal.content = newContentValue;
     }
-    const [canTrackToUse, setCanTrackToUse] = (0, react_1.useState)(() => (0, nullable_js_1.checkIsDefined)(props.canTrack) ? props.canTrack : true);
+    const [lastUpdated, setLastUpdated] = (0, react_1.useState)(() => 0);
+    const [shouldSendResetCookie, setShouldSendResetCookie] = (0, react_1.useState)(() => false);
     function processMessage(event) {
         var _a;
         const { data } = event;
@@ -101,10 +104,6 @@ function EnableEditor(props) {
                     }
                     break;
                 }
-                case "builder.patchUpdates": {
-                    // TODO
-                    break;
-                }
             }
         }
     }
@@ -113,7 +112,7 @@ function EnableEditor(props) {
         // run any dynamic JS code attached to content
         const jsCode = (_b = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.jsCode;
         if (jsCode) {
-            (0, evaluate_js_1.evaluate)({
+            (0, evaluate_1.evaluate)({
                 code: jsCode,
                 context: props.context || {},
                 localState: undefined,
@@ -129,7 +128,7 @@ function EnableEditor(props) {
         if (props.builderContextSignal.content) {
             const variationId = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.testVariationId;
             const contentId = (_b = props.builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.id;
-            (0, index_js_2._track)({
+            (0, index_js_1._track)({
                 type: "click",
                 canTrack: canTrackToUse,
                 contentId,
@@ -144,7 +143,7 @@ function EnableEditor(props) {
         }
     }
     function evalExpression(expression) {
-        return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_js_1.evaluate)({
+        return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_1.evaluate)({
             code: group,
             context: props.context || {},
             localState: undefined,
@@ -201,6 +200,7 @@ function EnableEditor(props) {
         if ((0, is_browser_js_1.isBrowser)()) {
             if ((0, is_editing_js_1.isEditing)()) {
                 setForceReRenderCount(forceReRenderCount + 1);
+                window.addEventListener("message", processMessage);
                 (0, init_editing_js_1.registerInsertMenu)();
                 (0, init_editing_js_1.setupBrowserForEditing)({
                     ...(props.locale
@@ -219,18 +219,17 @@ function EnableEditor(props) {
                         }
                         : {}),
                 });
-                Object.values(props.builderContextSignal.registeredComponents).forEach((registeredComponent) => {
+                Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
                     var _a;
                     const message = (0, register_component_js_1.createRegisterComponentMessage)(registeredComponent);
                     (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage(message, "*");
                 });
-                window.addEventListener("message", processMessage);
                 window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
             }
             if (props.builderContextSignal.content) {
                 const variationId = (_a = props.builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.testVariationId;
                 const contentId = (_b = props.builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.id;
-                (0, index_js_2._track)({
+                (0, index_js_1._track)({
                     type: "impression",
                     canTrack: canTrackToUse,
                     contentId,
@@ -254,10 +253,10 @@ function EnableEditor(props) {
                 if (searchParamPreviewModel === props.model &&
                     previewApiKey === props.apiKey &&
                     (!props.content || searchParamPreviewId === props.content.id)) {
-                    (0, index_js_1.getContent)({
+                    (0, index_js_2.getContent)({
                         model: props.model,
                         apiKey: props.apiKey,
-                        apiVersion: props.apiVersion,
+                        apiVersion: props.builderContextSignal.apiVersion,
                     }).then((content) => {
                         if (content) {
                             mergeNewContent(content);
@@ -275,6 +274,7 @@ function EnableEditor(props) {
             mergeNewContent(props.content);
         }
     }, [props.content]);
+    (0, react_1.useEffect)(() => { }, [shouldSendResetCookie]);
     (0, react_1.useEffect)(() => {
         evaluateJsCode();
     }, [
@@ -295,19 +295,16 @@ function EnableEditor(props) {
             }
         };
     }, []);
-    return (React.createElement(builder_context_js_1.default.Provider, { value: props.builderContextSignal }, props.builderContextSignal.content ? (React.createElement(React.Fragment, null,
-        React.createElement(react_native_1.View, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": (_e = props.builderContextSignal.content) === null || _e === void 0 ? void 0 : _e.id, "builder-model": props.model, key: forceReRenderCount, ...(target_js_1.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
-                ? {
+    return (React.createElement(builder_context_1.default.Provider, { value: props.builderContextSignal }, props.builderContextSignal.content ? (React.createElement(React.Fragment, null,
+        React.createElement(react_native_1.View, { key: forceReRenderCount, ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": (_e = props.builderContextSignal.content) === null || _e === void 0 ? void 0 : _e.id, "builder-model": props.model, 
+            // 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.
+            dataSet: {
+                "builder-content-id": "",
+            }, ...(props.showContent
+                ? {}
+                : {
                     hidden: true,
                     "aria-hidden": true,
-                }
-                : {}) }, props.children))) : null));
+                }) }, props.children))) : null));
 }
 exports.default = EnableEditor;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontCss = exports.getCss = void 0;
+const getCssFromFont = font => {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    let str = "";
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+const getFontCss = ({ customFonts }) => {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map(font => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+exports.getFontCss = getFontCss;
+const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return "";
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+exports.getCss = getCss;

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

@@ -0,0 +1,61 @@
+"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 inlined_styles_1 = __importDefault(require("../../inlined-styles"));
+const styles_helpers_js_1 = require("./styles.helpers.js");
+const styles_helpers_js_2 = require("./styles.helpers.js");
+function ContentStyles(props) {
+    const [injectedStyles, setInjectedStyles] = (0, react_1.useState)(() => `
+${(0, styles_helpers_js_1.getCss)({
+        cssCode: props.cssCode,
+        contentId: props.contentId,
+    })}
+${(0, styles_helpers_js_2.getFontCss)({
+        customFonts: props.customFonts,
+    })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`.trim());
+    return React.createElement(inlined_styles_1.default, { styles: injectedStyles });
+}
+exports.default = ContentStyles;

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

@@ -7,7 +7,12 @@ 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 __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))
@@ -23,13 +28,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const getContextStateInitialValue = ({ content, data, locale }) => {
     var _a, _b, _c;
     const defaultValues = {};
-    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach(input => {
         var _a2;
         if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
             defaultValues[input.name] = input.defaultValue;
         }
     });
-    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? {
+        locale
+    } : {});
     return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
 };
 exports.getContextStateInitialValue = getContextStateInitialValue;

package/dist/components/content/content.js

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"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);
@@ -33,26 +33,28 @@ const react_1 = require("react");
 const builder_registered_components_js_1 = require("../../constants/builder-registered-components.js");
 const register_component_js_1 = require("../../functions/register-component.js");
 const blocks_1 = __importDefault(require("../blocks/blocks"));
-const content_styles_1 = __importDefault(require("./components/content-styles"));
+const styles_1 = __importDefault(require("./components/styles"));
 const content_helpers_js_1 = require("./content.helpers.js");
 const target_js_1 = require("../../constants/target.js");
 const helpers_js_1 = require("../content-variants/helpers.js");
-const wrap_component_ref_js_1 = require("./wrap-component-ref.js");
 const enable_editor_1 = __importDefault(require("./components/enable-editor"));
-function Content(props) {
+const inlined_script_1 = __importDefault(require("../inlined-script"));
+const wrap_component_ref_js_1 = require("./wrap-component-ref.js");
+function ContentComponent(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     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,
         });
     });
     function contentSetState(newRootState) {
         builderContextSignal.rootState = newRootState;
     }
-    const [customComps, setCustomComps] = (0, react_1.useState)(() => [
+    const [registeredComponents, setRegisteredComponents] = (0, react_1.useState)(() => [
         ...(0, builder_registered_components_js_1.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
@@ -61,20 +63,13 @@ function Content(props) {
         // which is the new standard way of providing custom components, and must therefore take precedence.
         ...register_component_js_1.components,
         ...(props.customComponents || []),
-    ].reduce((acc, info) => ({
+    ].reduce((acc, { component, ...info }) => ({
         ...acc,
-        [info.name]: info,
+        [info.name]: {
+            component: component,
+            ...(0, register_component_js_1.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 undefined;
-    }
     const [builderContextSignal, setBuilderContextSignal] = (0, react_1.useState)(() => ({
         content: (0, content_helpers_js_1.getContentInitialValue)({
             content: props.content,
@@ -90,7 +85,7 @@ function Content(props) {
         context: props.context || {},
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
-        registeredComponents: [
+        componentInfos: [
             ...(0, builder_registered_components_js_1.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
@@ -99,29 +94,17 @@ function Content(props) {
             // which is the new standard way of providing custom components, and must therefore take precedence.
             ...register_component_js_1.components,
             ...(props.customComponents || []),
-        ].reduce((acc, { component, ...curr }) => ({
+        ].reduce((acc, { component: _, ...info }) => ({
             ...acc,
-            [curr.name]: {
-                component: target_js_1.TARGET === "vue3" ? (0, wrap_component_ref_js_1.wrapComponentRef)(component) : component,
-                ...curr,
-            },
+            [info.name]: (0, register_component_js_1.serializeComponentInfo)(info),
         }), {}),
         inheritedStyles: {},
     }));
-    (0, react_1.useEffect)(() => {
-        if (!builderContextSignal.content) {
-            builderContextSignal.content = (0, content_helpers_js_1.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(enable_editor_1.default, { 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() },
-            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
-                React.createElement(react_native_1.ScrollView, { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
-            target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(content_styles_1.default, { contentId: (_a = builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.id, cssCode: (_c = (_b = builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.cssCode, customFonts: (_e = (_d = builderContextSignal.content) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.customFonts }))) : null,
-            React.createElement(blocks_1.default, { blocks: (_g = (_f = builderContextSignal.content) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.blocks, context: builderContextSignal, components: customComps })))) : null));
+    return (React.createElement(enable_editor_1.default, { 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(inlined_script_1.default, { scriptStr: scriptStr }))) : null,
+        target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+            React.createElement(styles_1.default, { contentId: (_a = builderContextSignal.content) === null || _a === void 0 ? void 0 : _a.id, cssCode: (_c = (_b = builderContextSignal.content) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.cssCode, customFonts: (_e = (_d = builderContextSignal.content) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.customFonts }))) : null,
+        React.createElement(blocks_1.default, { blocks: (_g = (_f = builderContextSignal.content) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.blocks, context: builderContextSignal, registeredComponents: registeredComponents })));
 }
-exports.default = Content;
+exports.default = ContentComponent;

package/dist/components/content/wrap-component-ref.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.wrapComponentRef = void 0;
-const wrapComponentRef = (component) => component;
+const wrapComponentRef = component => component;
 exports.wrapComponentRef = wrapComponentRef;

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

@@ -1,5 +1,5 @@
 "use strict";
-'use client';
+"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);
@@ -30,44 +30,48 @@ 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 helpers_js_1 = require("./helpers.js");
 const content_1 = __importDefault(require("../content/content"));
-const canTrack_1 = require("../../helpers/canTrack");
+const canTrack_js_1 = require("../../helpers/canTrack.js");
 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)(() => {
+const ab_tests_js_1 = require("../../helpers/ab-tests.js");
+const inlined_script_1 = __importDefault(require("../inlined-script"));
+const target_js_1 = require("../../constants/target.js");
+function ContentVariants(props) {
+    var _a, _b, _c;
+    const [shouldRenderVariants, setShouldRenderVariants] = (0, react_1.useState)(() => (0, helpers_js_1.checkShouldRunVariants)({
+        canTrack: (0, canTrack_js_1.getDefaultCanTrack)(props.canTrack),
+        content: props.content,
+    }));
+    function variantScriptStr() {
         var _a;
-        return (0, helpers_1.getVariantsScriptString)((0, helpers_1.getVariants)(props.content).map((value) => ({
-            id: value.id,
+        return (0, helpers_js_1.getVariantsScriptString)((0, helpers_js_1.getVariants)(props.content).map((value) => ({
+            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; } `)
-        .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),
-        }));
+    }
+    function hideVariantsStyleString() {
+        return (0, helpers_js_1.getVariants)(props.content)
+            .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+            .join("");
+    }
+    (0, react_1.useEffect)(() => {
+        /**
+         * We unmount the non-winning variants post-hydration in Vue.
+         */
+    }, []);
     return (React.createElement(React.Fragment, null,
+        !props.__isNestedRender && target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+            React.createElement(inlined_script_1.default, { scriptStr: (0, helpers_js_1.getScriptString)() }))) : 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 })));
+            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_js_1.getVariants)(props.content)) === null || _b === void 0 ? void 0 :
+            _b.map((variant) => (React.createElement(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(content_1.default, { content: shouldRenderVariants
+                ? props.content
+                : (0, ab_tests_js_1.handleABTestingSync)({
+                    item: props.content,
+                    canTrack: (0, canTrack_js_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;
+exports.default = ContentVariants;

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

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