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

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 obfusctate 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

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.4.0"

package/src/context/builder.context.js

@@ -2,9 +2,10 @@ import { createContext } from "react";
 var stdin_default = createContext({
   content: null,
   context: {},
-  state: {},
-  setState() {
+  localState: void 0,
+  rootSetState() {
   },
+  rootState: {},
   apiKey: null,
   apiVersion: void 0,
   registeredComponents: {},

package/src/functions/evaluate.js

@@ -3,7 +3,9 @@ import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,
-  state,
+  localState,
+  rootState,
+  rootSetState,
   event,
   isExpression = true
 }) {
@@ -19,11 +21,33 @@ function evaluate({
   const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
   } catch (e) {
     console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
   }
 }
+function flattenState(rootState, localState, rootSetState) {
+  if (rootState === localState) {
+    throw new Error("rootState === localState");
+  }
+  return new Proxy(rootState, {
+    get: (_, prop) => {
+      if (localState && prop in localState) {
+        return localState[prop];
+      }
+      return rootState[prop];
+    },
+    set: (_, prop, value) => {
+      if (localState && prop in localState) {
+        throw new Error("Writing to local state is not allowed as it is read-only.");
+      }
+      rootState[prop] = value;
+      rootSetState == null ? void 0 : rootSetState(rootState);
+      return true;
+    }
+  });
+}
 export {
-  evaluate
+  evaluate,
+  flattenState
 };

package/src/functions/evaluate.test.js

@@ -0,0 +1,17 @@
+import { flattenState } from "./evaluate";
+describe("flatten state", () => {
+  it("should behave normally when no PROTO_STATE", () => {
+    const localState = {};
+    const rootState = { foo: "bar" };
+    const flattened = flattenState(rootState, localState, void 0);
+    expect(flattened.foo).toEqual("bar");
+    flattened.foo = "baz";
+    expect(rootState.foo).toEqual("baz");
+  });
+  it("should shadow write ", () => {
+    const rootState = { foo: "foo" };
+    const localState = { foo: "baz" };
+    const flattened = flattenState(rootState, localState, void 0);
+    expect(() => flattened.foo = "bar").toThrow("Writing to local state is not allowed as it is read-only.");
+  });
+});

package/src/functions/get-block-actions-handler.js

@@ -2,7 +2,9 @@ import { evaluate } from "./evaluate.js";
 const createEventHandler = (value, options) => (event) => evaluate({
   code: value,
   context: options.context,
-  state: options.state,
+  localState: options.localState,
+  rootState: options.rootState,
+  rootSetState: options.rootSetState,
   event,
   isExpression: false
 });

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/functions/get-processed-block.js

@@ -24,7 +24,9 @@ import { transformBlock } from "./transform-block.js";
 const evaluateBindings = ({
   block,
   context,
-  state
+  localState,
+  rootState,
+  rootSetState
 }) => {
   if (!block.bindings) {
     return block;
@@ -36,7 +38,13 @@ const evaluateBindings = ({
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
-    const value = evaluate({ code: expression, state, context });
+    const value = evaluate({
+      code: expression,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
     set(copied, binding, value);
   }
   return copied;
@@ -45,11 +53,19 @@ function getProcessedBlock({
   block,
   context,
   shouldEvaluateBindings,
-  state
+  localState,
+  rootState,
+  rootSetState
 }) {
   const transformedBlock = transformBlock(block);
   if (shouldEvaluateBindings) {
-    return evaluateBindings({ block: transformedBlock, state, context });
+    return evaluateBindings({
+      block: transformedBlock,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
   } else {
     return transformedBlock;
   }

package/src/functions/get-processed-block.test.js

@@ -20,7 +20,9 @@ test("Can process bindings", () => {
   const processed = getProcessedBlock({
     block,
     context: {},
-    state: { test: "hello" },
+    rootState: { test: "hello" },
+    rootSetState: void 0,
+    localState: void 0,
     shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);

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
 };

package/src/scripts/init-editing.js

@@ -1,3 +1,4 @@
+import { SDK_VERSION } from "../constants/sdk-version.js";
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
 import { register } from "../functions/register.js";
@@ -31,6 +32,7 @@ const setupBrowserForEditing = (options = {}) => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
+        version: SDK_VERSION,
         supportsPatchUpdates: false,
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true