@builder.io/sdk-react-native 0.3.1 → 0.4.1

package/dist/functions/get-content/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getContent = exports.getAllContent = void 0;
+exports.processContentResult = exports.getContent = exports.getAllContent = void 0;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -42,42 +42,59 @@ var __async = (__this, __arguments, generator) => {
         step((generator = generator.apply(__this, __arguments)).next());
     });
 };
+const target_js_1 = require("../../constants/target.js");
+const ab_tests_js_1 = require("../../helpers/ab-tests.js");
+const canTrack_js_1 = require("../../helpers/canTrack.js");
 const logger_js_1 = require("../../helpers/logger.js");
 const get_fetch_js_1 = require("../get-fetch.js");
-const ab_testing_js_1 = require("./ab-testing.js");
+const is_browser_js_1 = require("../is-browser.js");
 const generate_content_url_js_1 = require("./generate-content-url.js");
+const checkContentHasResults = (content) => "results" in content;
 function getContent(options) {
     return __async(this, null, function* () {
         const allContent = yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }));
-        if (allContent && "results" in allContent) {
-            return (allContent == null ? void 0 : allContent.results[0]) || null;
+        if (allContent && checkContentHasResults(allContent)) {
+            return allContent.results[0] || null;
         }
         return null;
     });
 }
 exports.getContent = getContent;
+const fetchContent = (options) => __async(void 0, null, function* () {
+    const url = (0, generate_content_url_js_1.generateContentUrl)(options);
+    const res = yield (0, get_fetch_js_1.fetch)(url.href);
+    const content = yield res.json();
+    return content;
+});
+const processContentResult = (options, content) => __async(void 0, null, function* () {
+    const canTrack = (0, canTrack_js_1.getDefaultCanTrack)(options.canTrack);
+    if (!canTrack)
+        return content;
+    if (!((0, is_browser_js_1.isBrowser)() || target_js_1.TARGET === "reactNative"))
+        return content;
+    try {
+        const newResults = [];
+        for (const item of content.results) {
+            newResults.push(yield (0, ab_tests_js_1.handleABTesting)({ item, canTrack }));
+        }
+        content.results = newResults;
+    }
+    catch (e) {
+        logger_js_1.logger.error("Could not process A/B tests. ", e);
+    }
+    return content;
+});
+exports.processContentResult = processContentResult;
 function getAllContent(options) {
     return __async(this, null, function* () {
         try {
             const url = (0, generate_content_url_js_1.generateContentUrl)(options);
-            const res = yield (0, get_fetch_js_1.fetch)(url.href);
-            const content = yield res.json();
-            if ("status" in content && !("results" in content)) {
+            const content = yield fetchContent(options);
+            if (!checkContentHasResults(content)) {
                 logger_js_1.logger.error("Error fetching data. ", { url, content, options });
                 return content;
             }
-            const canTrack = options.canTrack !== false;
-            try {
-                if (canTrack && Array.isArray(content.results)) {
-                    for (const item of content.results) {
-                        yield (0, ab_testing_js_1.handleABTesting)({ item, canTrack });
-                    }
-                }
-            }
-            catch (e) {
-                logger_js_1.logger.error("Could not setup A/B testing. ", e);
-            }
-            return content;
+            return processContentResult(options, content);
         }
         catch (error) {
             logger_js_1.logger.error("Error fetching data. ", error);

package/dist/helpers/ab-tests.js

@@ -1,10 +1,127 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setContentVariationCookie = exports.getContentVariationCookie = void 0;
+exports.handleABTestingSync = exports.handleABTesting = void 0;
+var __defProp = Object.defineProperty;
+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 __async = (__this, __arguments, generator) => {
+    return new Promise((resolve, reject) => {
+        var fulfilled = (value) => {
+            try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            }
+        };
+        var rejected = (value) => {
+            try {
+                step(generator.throw(value));
+            }
+            catch (e) {
+                reject(e);
+            }
+        };
+        var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+        step((generator = generator.apply(__this, __arguments)).next());
+    });
+};
 const cookie_js_1 = require("./cookie.js");
-const BUILDER_STORE_PREFIX = "builderio.variations";
+const nullable_js_1 = require("../helpers/nullable.js");
+const logger_js_1 = require("./logger.js");
+const BUILDER_STORE_PREFIX = "builder.tests";
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
-const getContentVariationCookie = ({ contentId, canTrack }) => (0, cookie_js_1.getCookie)({ name: getContentTestKey(contentId), canTrack });
-exports.getContentVariationCookie = getContentVariationCookie;
-const setContentVariationCookie = ({ contentId, canTrack, value }) => (0, cookie_js_1.setCookie)({ name: getContentTestKey(contentId), value, canTrack });
-exports.setContentVariationCookie = setContentVariationCookie;
+const getContentVariationCookie = ({ contentId }) => (0, cookie_js_1.getCookie)({ name: getContentTestKey(contentId), canTrack: true });
+const getContentVariationCookieSync = ({ contentId }) => (0, cookie_js_1.getCookieSync)({ name: getContentTestKey(contentId), canTrack: true });
+const setContentVariationCookie = ({ contentId, value }) => (0, cookie_js_1.setCookie)({ name: getContentTestKey(contentId), value, canTrack: true });
+const checkIsBuilderContentWithVariations = (item) => (0, nullable_js_1.checkIsDefined)(item.id) && (0, nullable_js_1.checkIsDefined)(item.variations) && Object.keys(item.variations).length > 0;
+const getRandomVariationId = ({ id, variations }) => {
+    var _a;
+    let n = 0;
+    const random = Math.random();
+    for (const id2 in variations) {
+        const testRatio = (_a = variations[id2]) == null ? void 0 : _a.testRatio;
+        n += testRatio;
+        if (random < n) {
+            return id2;
+        }
+    }
+    return id;
+};
+const getAndSetVariantId = (args) => {
+    const randomVariationId = getRandomVariationId(args);
+    setContentVariationCookie({
+        contentId: args.id,
+        value: randomVariationId
+    }).catch((err) => {
+        logger_js_1.logger.error("could not store A/B test variation: ", err);
+    });
+    return randomVariationId;
+};
+const getTestFields = ({ item, testGroupId }) => {
+    const variationValue = item.variations[testGroupId];
+    if (testGroupId === item.id || !variationValue) {
+        return {
+            testVariationId: item.id,
+            testVariationName: "Default"
+        };
+    }
+    else {
+        return {
+            data: variationValue.data,
+            testVariationId: variationValue.id,
+            testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
+        };
+    }
+};
+const handleABTestingSync = ({ item, canTrack }) => {
+    if (!canTrack) {
+        return item;
+    }
+    if (!item) {
+        return void 0;
+    }
+    if (!checkIsBuilderContentWithVariations(item)) {
+        return item;
+    }
+    const testGroupId = getContentVariationCookieSync({
+        contentId: item.id
+    }) || getAndSetVariantId({
+        variations: item.variations,
+        id: item.id
+    });
+    const variationValue = getTestFields({ item, testGroupId });
+    return __spreadValues(__spreadValues({}, item), variationValue);
+};
+exports.handleABTestingSync = handleABTestingSync;
+const handleABTesting = (_0) => __async(void 0, [_0], function* ({ item, canTrack }) {
+    if (!canTrack) {
+        return item;
+    }
+    if (!checkIsBuilderContentWithVariations(item)) {
+        return item;
+    }
+    const cookieValue = yield getContentVariationCookie({
+        contentId: item.id
+    });
+    const testGroupId = cookieValue || getAndSetVariantId({
+        variations: item.variations,
+        id: item.id
+    });
+    const variationValue = getTestFields({ item, testGroupId });
+    return __spreadValues(__spreadValues({}, item), variationValue);
+});
+exports.handleABTesting = handleABTesting;

package/dist/helpers/canTrack.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultCanTrack = void 0;
+const nullable_1 = require("./nullable");
+const getDefaultCanTrack = (canTrack) => (0, nullable_1.checkIsDefined)(canTrack) ? canTrack : true;
+exports.getDefaultCanTrack = getDefaultCanTrack;

package/dist/helpers/cookie.js

@@ -26,6 +26,7 @@ var __async = (__this, __arguments, generator) => {
         step((generator = generator.apply(__this, __arguments)).next());
     });
 };
+const logger_js_1 = require("./logger.js");
 const react_native_storage_1 = __importDefault(require("react-native-storage"));
 const is_browser_js_1 = require("../functions/is-browser.js");
 const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
@@ -52,7 +53,10 @@ const getCookie = (_0) => __async(void 0, [_0], function* ({ name, canTrack }) {
         return data.value;
     }
     catch (err) {
-        console.debug("[COOKIE] GET error: ", err);
+        if ((err == null ? void 0 : err.name) !== "NotFoundError") {
+            logger_js_1.logger.warn("[COOKIE] GET error: ", (err == null ? void 0 : err.message) || err);
+        }
+        return void 0;
     }
 });
 exports.getCookie = getCookie;
@@ -64,7 +68,10 @@ const setCookie = (_0) => __async(void 0, [_0], function* ({ name, value, expire
         yield storage.save({ key: getStorageName(name), data: { value }, expires });
     }
     catch (err) {
-        console.warn("[COOKIE] SET error: ", err);
+        if ((err == null ? void 0 : err.name) !== "NotFoundError") {
+            logger_js_1.logger.warn("[COOKIE] SET error: ", (err == null ? void 0 : err.message) || err);
+        }
+        return void 0;
     }
 });
 exports.setCookie = setCookie;

package/dist/helpers/logger.js

@@ -5,6 +5,7 @@ const MSG_PREFIX = "[Builder.io]: ";
 const logger = {
     log: (...message) => console.log(MSG_PREFIX, ...message),
     error: (...message) => console.error(MSG_PREFIX, ...message),
-    warn: (...message) => console.warn(MSG_PREFIX, ...message)
+    warn: (...message) => console.warn(MSG_PREFIX, ...message),
+    debug: (...message) => console.debug(MSG_PREFIX, ...message)
 };
 exports.logger = logger;

package/dist/index.js

@@ -14,15 +14,24 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.track = void 0;
+exports.track = exports.setEditorSettings = exports.register = exports.processContentResult = exports.isPreviewing = exports.isEditing = exports.getContent = exports.getBuilderSearchParams = exports.getAllContent = exports.createRegisterComponentMessage = void 0;
 __exportStar(require("./index-helpers/top-of-file.js"), exports);
 __exportStar(require("./index-helpers/blocks-exports.js"), exports);
-__exportStar(require("./functions/is-editing.js"), exports);
-__exportStar(require("./functions/is-previewing.js"), exports);
-__exportStar(require("./functions/register-component.js"), exports);
-__exportStar(require("./functions/register.js"), exports);
-__exportStar(require("./functions/set-editor-settings.js"), exports);
-__exportStar(require("./functions/get-content/index.js"), exports);
-__exportStar(require("./functions/get-builder-search-params/index.js"), exports);
-const index_js_1 = require("./functions/track/index.js");
-Object.defineProperty(exports, "track", { enumerable: true, get: function () { return index_js_1.track; } });
+const is_editing_js_1 = require("./functions/is-editing.js");
+Object.defineProperty(exports, "isEditing", { enumerable: true, get: function () { return is_editing_js_1.isEditing; } });
+const is_previewing_js_1 = require("./functions/is-previewing.js");
+Object.defineProperty(exports, "isPreviewing", { enumerable: true, get: function () { return is_previewing_js_1.isPreviewing; } });
+const register_component_js_1 = require("./functions/register-component.js");
+Object.defineProperty(exports, "createRegisterComponentMessage", { enumerable: true, get: function () { return register_component_js_1.createRegisterComponentMessage; } });
+const register_js_1 = require("./functions/register.js");
+Object.defineProperty(exports, "register", { enumerable: true, get: function () { return register_js_1.register; } });
+const set_editor_settings_js_1 = require("./functions/set-editor-settings.js");
+Object.defineProperty(exports, "setEditorSettings", { enumerable: true, get: function () { return set_editor_settings_js_1.setEditorSettings; } });
+const index_js_1 = require("./functions/get-content/index.js");
+Object.defineProperty(exports, "getAllContent", { enumerable: true, get: function () { return index_js_1.getAllContent; } });
+Object.defineProperty(exports, "getContent", { enumerable: true, get: function () { return index_js_1.getContent; } });
+Object.defineProperty(exports, "processContentResult", { enumerable: true, get: function () { return index_js_1.processContentResult; } });
+const index_js_2 = require("./functions/get-builder-search-params/index.js");
+Object.defineProperty(exports, "getBuilderSearchParams", { enumerable: true, get: function () { return index_js_2.getBuilderSearchParams; } });
+const index_js_3 = require("./functions/track/index.js");
+Object.defineProperty(exports, "track", { enumerable: true, get: function () { return index_js_3.track; } });

package/package.json

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

package/src/blocks/button/button.jsx

@@ -1,3 +1,4 @@
+'use client';
 import BaseText from "../BaseText";
 import * as React from "react";
 import {

package/src/blocks/columns/columns.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/custom-code/custom-code.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/embed/embed.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/form/form.jsx

@@ -1,3 +1,4 @@
+'use client';
 import BaseText from "../BaseText";
 import * as React from "react";
 import {

package/src/blocks/fragment/fragment.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/img/img.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/input/input.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/raw-text/raw-text.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/section/section.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/select/select.jsx

@@ -1,3 +1,4 @@
+'use client';
 import BaseText from "../BaseText";
 import * as React from "react";
 import {

package/src/blocks/submit-button/submit-button.jsx

@@ -1,3 +1,4 @@
+'use client';
 import BaseText from "../BaseText";
 import * as React from "react";
 import {

package/src/blocks/symbol/symbol.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/blocks/textarea/textarea.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/components/render-block/block-styles.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/components/render-block/render-block.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,
@@ -52,7 +53,7 @@ function RenderBlock(props) {
         });
   }
 
-  const [tag, setTag] = useState(() => props.block.tagName || "div");
+  const [Tag, setTag] = useState(() => props.block.tagName || "div");
 
   function canShowBlock() {
     if ("hide" in useBlock()) {
@@ -157,12 +158,12 @@ function RenderBlock(props) {
         <>
           {!component?.noWrap ? (
             <>
-              {isEmptyHtmlElement(tag) ? (
+              {isEmptyHtmlElement(Tag) ? (
                 <>
-                  <View {...attributes()} {...actions()} />
+                  <Tag {...attributes()} {...actions()} />
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag) && repeatItem() ? (
+              {!isEmptyHtmlElement(Tag) && repeatItem() ? (
                 <>
                   {repeatItem()?.map((data, index) => (
                     <RenderRepeatedBlock
@@ -173,9 +174,9 @@ function RenderBlock(props) {
                   ))}
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag) && !repeatItem() ? (
+              {!isEmptyHtmlElement(Tag) && !repeatItem() ? (
                 <>
-                  <View {...attributes()} {...actions()}>
+                  <Tag {...attributes()} {...actions()}>
                     <RenderComponent {...renderComponentProps()} />
 
                     {childrenWithoutParentComponent()?.map((child) => (
@@ -193,7 +194,7 @@ function RenderBlock(props) {
                         context={childrenContext()}
                       />
                     ))}
-                  </View>
+                  </Tag>
                 </>
               ) : null}
             </>

package/src/components/render-block/render-component.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,
@@ -13,8 +14,6 @@ import RenderBlock from "./render-block";
 import BuilderContext from "../../context/builder.context.js";
 
 function RenderComponent(props) {
-  const ComponentRefRef = props.componentRef;
-
   return (
     <BuilderContext.Provider
       value={{
@@ -30,7 +29,7 @@ function RenderComponent(props) {
     >
       {props.componentRef ? (
         <>
-          <ComponentRefRef {...props.componentOptions}>
+          <props.componentRef {...props.componentOptions}>
             {props.blockChildren?.map((child) => (
               <RenderBlock
                 key={"render-block-" + child.id}
@@ -46,7 +45,7 @@ function RenderComponent(props) {
                 context={props.context}
               />
             ))}
-          </ComponentRefRef>
+          </props.componentRef>
         </>
       ) : null}
     </BuilderContext.Provider>

package/src/components/render-block/render-repeated-block.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/components/render-blocks.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/components/render-content/builder-editing.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,

package/src/components/render-content/components/render-styles.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,
@@ -13,8 +14,8 @@ import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 
 function RenderContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = useState(
-    () => `
+  const [injectedStyles, setInjectedStyles] = useState(() =>
+    `
 ${getCss({
   cssCode: props.cssCode,
   contentId: props.contentId,
@@ -35,7 +36,7 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`
+`.trim()
   );
 
   return <RenderInlinedStyles styles={injectedStyles} />;

package/src/components/render-content/render-content.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,
@@ -35,6 +36,8 @@ import {
 } from "./render-content.helpers.js";
 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";
 
 function RenderContent(props) {
   const elementRef = useRef(null);
@@ -105,9 +108,13 @@ function RenderContent(props) {
       ...components,
       ...(props.customComponents || []),
     ].reduce(
-      (acc, curr) => ({
+      (acc, { component, ...curr }) => ({
         ...acc,
-        [curr.name]: curr,
+        [curr.name]: {
+          component:
+            TARGET === "vue3" ? wrapComponentRef(component) : component,
+          ...curr,
+        },
       }),
       {}
     )
@@ -244,6 +251,14 @@ 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
+      contentId: props.content?.id,
+      parentContentId: props.parentContentId,
+    })
+  );
+
   useEffect(() => {
     if (!props.apiKey) {
       logger.error(
@@ -265,6 +280,11 @@ function RenderContent(props) {
                 includeRefs: props.includeRefs,
               }
             : {}),
+          ...(props.enrich
+            ? {
+                enrich: props.enrich,
+              }
+            : {}),
         });
         Object.values(allRegisteredComponents).forEach(
           (registeredComponent) => {
@@ -377,7 +397,27 @@ function RenderContent(props) {
             onClick={(event) => onClick(event)}
             builder-content-id={useContent?.id}
             builder-model={props.model}
+            {...(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
+              ? {
+                  hidden: true,
+                  "aria-hidden": true,
+                }
+              : {})}
           >
+            {props.isSsrAbTest ? (
+              <>
+                <ScrollView dangerouslySetInnerHTML={{ __html: scriptStr }} />
+              </>
+            ) : null}
+
             {TARGET !== "reactNative" ? (
               <>
                 <RenderContentStyles

package/src/components/render-content/wrap-component-ref.js

@@ -0,0 +1,4 @@
+const wrapComponentRef = (component) => component;
+export {
+  wrapComponentRef
+};