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

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

@@ -0,0 +1,139 @@
+import { isBrowser } from "../../functions/is-browser";
+const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+const checkShouldRunVariants = ({
+  canTrack,
+  content
+}) => {
+  const hasVariants = getVariants(content).length > 0;
+  if (!hasVariants) {
+    return false;
+  }
+  if (!canTrack) {
+    return false;
+  }
+  if (isBrowser()) {
+    return false;
+  }
+  return true;
+};
+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 isHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+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})
+  `;
+};
+const getRenderContentScriptString = ({
+  parentContentId,
+  contentId
+}) => {
+  return `
+  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+};
+export {
+  checkShouldRunVariants,
+  getRenderContentScriptString,
+  getVariants,
+  getVariantsScriptString
+};

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

@@ -0,0 +1,101 @@
+'use client';
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
+import { useState } from "react";
+import {
+  checkShouldRunVariants,
+  getVariants,
+  getVariantsScriptString,
+} from "./helpers";
+import RenderContent from "../render-content/render-content";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+import RenderInlinedStyles from "../render-inlined-styles";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+
+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 [hideVariantsStyleString, setHideVariantsStyleString] = useState(() =>
+    getVariants(props.content)
+      .map((value) => `.variant-${value.id} { 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),
+        })
+  );
+
+  return (
+    <>
+      {shouldRenderVariants ? (
+        <>
+          <RenderInlinedStyles
+            id={`variants-styles-${props.content?.id}`}
+            styles={hideVariantsStyleString}
+          />
+          <View
+            id={`variants-script-${props.content?.id}`}
+            dangerouslySetInnerHTML={{ __html: variantScriptStr }}
+          />
+          {getVariants(props.content)?.map((variant) => (
+            <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}
+
+      <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}
+      />
+    </>
+  );
+}
+
+export default RenderContentVariants;

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,
@@ -7,31 +8,10 @@ import {
   Image,
   Text,
 } from "react-native";
-import { TARGET } from "../constants/target.js";
 
 function RenderInlinedStyles(props) {
-  function tag() {
-    // NOTE: we have to obfuscate the name of the tag due to a limitation in the svelte-preprocessor plugin.
-    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-    return "sty" + "le";
-  }
-
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-
   return (
-    <>
-      {TARGET === "svelte" || TARGET === "qwik" ? (
-        <>
-          <View dangerouslySetInnerHTML={{ __html: props.styles }} />
-        </>
-      ) : (
-        <View>
-          <Text>{props.styles}</Text>
-        </View>
-      )}
-    </>
+    <View dangerouslySetInnerHTML={{ __html: props.styles }} id={props.id} />
   );
 }
 

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.3.1"
+export const SDK_VERSION = "0.4.0"

package/src/functions/get-content/generate-content-url.js

@@ -29,6 +29,7 @@ const generateContentUrl = (options) => {
     model,
     apiKey,
     includeRefs = true,
+    enrich,
     locale,
     apiVersion = DEFAULT_API_VERSION
   } = options;
@@ -38,7 +39,7 @@ const generateContentUrl = (options) => {
   if (!["v2", "v3"].includes(apiVersion)) {
     throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
   }
-  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}${enrich ? `&enrich=${enrich}` : ""}`);
   const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
   const flattened = flatten(queryOptions);
   for (const key in flattened) {

package/src/functions/get-content/generate-content-url.test.js

@@ -79,4 +79,19 @@ describe("Generate Content URL", () => {
       });
     }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
   });
+  test("generate content url with enrich option true", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel,
+      enrich: true
+    });
+    expect(output).toMatchSnapshot();
+  });
+  test("generate content url with enrich option not present", () => {
+    const output = generateContentUrl({
+      apiKey: testKey,
+      model: testModel
+    });
+    expect(output).toMatchSnapshot();
+  });
 });

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

@@ -37,40 +37,56 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import { TARGET } from "../../constants/target.js";
+import { handleABTesting } from "../../helpers/ab-tests.js";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
 import { logger } from "../../helpers/logger.js";
 import { fetch } from "../get-fetch.js";
-import { handleABTesting } from "./ab-testing.js";
+import { isBrowser } from "../is-browser.js";
 import { generateContentUrl } from "./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;
   });
 }
+const fetchContent = (options) => __async(void 0, null, function* () {
+  const url = generateContentUrl(options);
+  const res = yield fetch(url.href);
+  const content = yield res.json();
+  return content;
+});
+const processContentResult = (options, content) => __async(void 0, null, function* () {
+  const canTrack = getDefaultCanTrack(options.canTrack);
+  if (!canTrack)
+    return content;
+  if (!(isBrowser() || TARGET === "reactNative"))
+    return content;
+  try {
+    const newResults = [];
+    for (const item of content.results) {
+      newResults.push(yield handleABTesting({ item, canTrack }));
+    }
+    content.results = newResults;
+  } catch (e) {
+    logger.error("Could not process A/B tests. ", e);
+  }
+  return content;
+});
 function getAllContent(options) {
   return __async(this, null, function* () {
     try {
       const url = generateContentUrl(options);
-      const res = yield fetch(url.href);
-      const content = yield res.json();
-      if ("status" in content && !("results" in content)) {
+      const content = yield fetchContent(options);
+      if (!checkContentHasResults(content)) {
         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 handleABTesting({ item, canTrack });
-          }
-        }
-      } catch (e) {
-        logger.error("Could not setup A/B testing. ", e);
-      }
-      return content;
+      return processContentResult(options, content);
     } catch (error) {
       logger.error("Error fetching data. ", error);
       return null;
@@ -79,5 +95,6 @@ function getAllContent(options) {
 }
 export {
   getAllContent,
-  getContent
+  getContent,
+  processContentResult
 };

package/src/helpers/ab-tests.js

@@ -1,16 +1,138 @@
-import { getCookie, setCookie } from "./cookie.js";
-const BUILDER_STORE_PREFIX = "builderio.variations";
+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());
+  });
+};
+import { getCookie, getCookieSync, setCookie } from "./cookie.js";
+import { checkIsDefined } from "../helpers/nullable.js";
+import { logger } from "./logger.js";
+const BUILDER_STORE_PREFIX = "builder.tests";
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
-const getContentVariationCookie = ({
-  contentId,
-  canTrack
-}) => getCookie({ name: getContentTestKey(contentId), canTrack });
+const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
+const getContentVariationCookieSync = ({ contentId }) => getCookieSync({ name: getContentTestKey(contentId), canTrack: true });
 const setContentVariationCookie = ({
   contentId,
-  canTrack,
   value
-}) => setCookie({ name: getContentTestKey(contentId), value, canTrack });
+}) => setCookie({ name: getContentTestKey(contentId), value, canTrack: true });
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && 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.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);
+};
+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);
+});
 export {
-  getContentVariationCookie,
-  setContentVariationCookie
+  handleABTesting,
+  handleABTestingSync
 };

package/src/helpers/canTrack.js

@@ -0,0 +1,5 @@
+import { checkIsDefined } from "./nullable";
+const getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
+export {
+  getDefaultCanTrack
+};

package/src/helpers/cookie.js

@@ -18,6 +18,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import { logger } from "./logger.js";
 import Storage from "react-native-storage";
 import { isBrowser } from "../functions/is-browser.js";
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -46,7 +47,10 @@ const getCookie = (_0) => __async(void 0, [_0], function* ({
     const data = yield storage.load({ key: getStorageName(parsedName) });
     return data.value;
   } catch (err) {
-    console.debug("[COOKIE] GET error: ", err);
+    if ((err == null ? void 0 : err.name) !== "NotFoundError") {
+      logger.warn("[COOKIE] GET error: ", (err == null ? void 0 : err.message) || err);
+    }
+    return void 0;
   }
 });
 const setCookie = (_0) => __async(void 0, [_0], function* ({
@@ -61,7 +65,10 @@ const setCookie = (_0) => __async(void 0, [_0], function* ({
     }
     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.warn("[COOKIE] SET error: ", (err == null ? void 0 : err.message) || err);
+    }
+    return void 0;
   }
 });
 export {

package/src/helpers/logger.js

@@ -2,7 +2,8 @@ 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)
 };
 export {
   logger

package/src/index.js

@@ -1,13 +1,24 @@
 export * from "./index-helpers/top-of-file.js";
 export * from "./index-helpers/blocks-exports.js";
-export * from "./functions/is-editing.js";
-export * from "./functions/is-previewing.js";
-export * from "./functions/register-component.js";
-export * from "./functions/register.js";
-export * from "./functions/set-editor-settings.js";
-export * from "./functions/get-content/index.js";
-export * from "./functions/get-builder-search-params/index.js";
+import { isEditing } from "./functions/is-editing.js";
+import { isPreviewing } from "./functions/is-previewing.js";
+import { createRegisterComponentMessage } from "./functions/register-component.js";
+import { register } from "./functions/register.js";
+import { setEditorSettings } from "./functions/set-editor-settings.js";
+import {
+  getAllContent,
+  getContent,
+  processContentResult
+} from "./functions/get-content/index.js";
 import { track } from "./functions/track/index.js";
 export {
+  createRegisterComponentMessage,
+  getAllContent,
+  getContent,
+  isEditing,
+  isPreviewing,
+  processContentResult,
+  register,
+  setEditorSettings,
   track
 };