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

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

@@ -0,0 +1,120 @@
+"use client";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
+import { useState, useEffect } from "react";
+import {
+  checkShouldRunVariants,
+  getScriptString,
+  getVariants,
+  getVariantsScriptString,
+} from "./helpers.js";
+import ContentComponent from "../content/content";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
+import InlinedStyles from "../inlined-styles";
+import { handleABTestingSync } from "../../helpers/ab-tests.js";
+import InlinedScript from "../inlined-script";
+import { TARGET } from "../../constants/target.js";
+
+function ContentVariants(props) {
+  const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+  );
+
+  function variantScriptStr() {
+    return getVariantsScriptString(
+      getVariants(props.content).map((value) => ({
+        id: value.testVariationId,
+        testRatio: value.testRatio,
+      })),
+      props.content?.id || ""
+    );
+  }
+
+  function hideVariantsStyleString() {
+    return getVariants(props.content)
+      .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+      .join("");
+  }
+
+  useEffect(() => {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+  }, []);
+
+  return (
+    <>
+      {!props.__isNestedRender && TARGET !== "reactNative" ? (
+        <>
+          <InlinedScript scriptStr={getScriptString()} />
+        </>
+      ) : null}
+
+      {shouldRenderVariants ? (
+        <>
+          <InlinedStyles
+            id={`variants-styles-${props.content?.id}`}
+            styles={hideVariantsStyleString()}
+          />
+          <InlinedScript scriptStr={variantScriptStr()} />
+          {getVariants(props.content)?.map((variant) => (
+            <ContentComponent
+              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}
+
+      <ContentComponent
+        {...{}}
+        content={
+          shouldRenderVariants
+            ? props.content
+            : handleABTestingSync({
+                item: props.content,
+                canTrack: getDefaultCanTrack(props.canTrack),
+              })
+        }
+        classNameProp={`variant-${props.content?.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}
+      />
+    </>
+  );
+}
+
+export default ContentVariants;

package/src/components/{render-content-variants → content-variants}/helpers.js

@@ -1,23 +1,43 @@
-import { TARGET } from "../../constants/target";
-import { isBrowser } from "../../functions/is-browser";
-const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
+    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { TARGET } from "../../constants/target.js";
+import { isBrowser } from "../../functions/is-browser.js";
+const getVariants = content => Object.values((content == null ? void 0 : content.variations) || {}).map(variant => __spreadProps(__spreadValues({}, variant), {
+  testVariationId: variant.id,
+  id: content == null ? void 0 : content.id
+}));
 const checkShouldRunVariants = ({
   canTrack,
   content
 }) => {
   const hasVariants = getVariants(content).length > 0;
-  if (!hasVariants) {
-    return false;
-  }
-  if (!canTrack) {
-    return false;
-  }
-  if (isBrowser()) {
-    return false;
-  }
+  if (TARGET === "reactNative") return false;
+  if (!hasVariants) return false;
+  if (!canTrack) return false;
+  if (TARGET === "vue2" || TARGET === "vue3") return true;
+  if (isBrowser()) return false;
   return true;
 };
 function bldrAbTest(contentId, variants, isHydrationTarget2) {
+  var _a;
   function getAndSetVariantId() {
     function setCookie(name, value, days) {
       let expires = "";
@@ -33,16 +53,14 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
       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);
+        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);
+    const availableIDs = variants.map(vr => vr.id).concat(contentId);
     if (variantInCookie && availableIDs.includes(variantInCookie)) {
       return variantInCookie;
     }
@@ -61,13 +79,15 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
     return contentId;
   }
   const winningVariantId = getAndSetVariantId();
-  const styleEl = document.getElementById(`variants-styles-${contentId}`);
+  const styleEl = (_a = document.currentScript) == null ? void 0 : _a.previousElementSibling;
   if (isHydrationTarget2) {
     styleEl.remove();
-    const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+    const thisScriptEl = document.currentScript;
     thisScriptEl == null ? void 0 : thisScriptEl.remove();
   } else {
-    const newStyleStr = variants.concat({ id: contentId }).filter((variant) => variant.id !== winningVariantId).map((value) => {
+    const newStyleStr = variants.concat({
+      id: contentId
+    }).filter(variant => variant.id !== winningVariantId).map(value => {
       return `.variant-${value.id} {  display: none; }
         `;
     }).join("");
@@ -75,6 +95,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
   }
 }
 function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+  var _a;
   if (!navigator.cookieEnabled) {
     return;
   }
@@ -83,16 +104,14 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
     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);
+      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 parentDiv = (_a = document.currentScript) == null ? void 0 : _a.parentElement;
   const variantIsDefaultContent = variantContentId === defaultContentId;
   if (variantId === variantContentId) {
     if (variantIsDefaultContent) {
@@ -113,29 +132,27 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
   }
   return;
 }
-const getIsHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const getIsHydrationTarget = target => target === "react" || target === "reactNative";
 const isHydrationTarget = getIsHydrationTarget(TARGET);
-const AB_TEST_FN_NAME = "bldrAbTest";
-const CONTENT_FN_NAME = "bldrCntntScrpt";
-const getVariantsScriptString = (variants, contentId) => {
+const AB_TEST_FN_NAME = "builderIoAbTest";
+const CONTENT_FN_NAME = "builderIoRenderContent";
+const getScriptString = () => {
   const fnStr = bldrAbTest.toString().replace(/\s+/g, " ");
   const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, " ");
   return `
-  const ${AB_TEST_FN_NAME} = ${fnStr}
-  const ${CONTENT_FN_NAME} = ${fnStr2}
-  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
+const getVariantsScriptString = (variants, contentId) => {
+  return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
 const getRenderContentScriptString = ({
-  parentContentId,
-  contentId
+  contentId,
+  variationId
 }) => {
   return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
-};
-export {
-  checkShouldRunVariants,
-  getRenderContentScriptString,
-  getVariants,
-  getVariantsScriptString
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };
+export { checkShouldRunVariants, getRenderContentScriptString, getScriptString, getVariants, getVariantsScriptString }

package/src/components/inlined-script.jsx

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

package/src/components/{render-inlined-styles.jsx → inlined-styles.jsx}

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -9,10 +9,10 @@ import {
   Text,
 } from "react-native";
 
-function RenderInlinedStyles(props) {
+function InlinedStyles(props) {
   return (
     <View dangerouslySetInnerHTML={{ __html: props.styles }} id={props.id} />
   );
 }
 
-export default RenderInlinedStyles;
+export default InlinedStyles;

package/src/constants/device-sizes.js

@@ -1,4 +1,4 @@
-import { fastClone } from "../functions/fast-clone";
+import { fastClone } from "../functions/fast-clone.js";
 const SIZES = {
   small: {
     min: 320,
@@ -17,7 +17,10 @@ const SIZES = {
   }
 };
 const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
-const getSizesForBreakpoints = ({ small, medium }) => {
+const getSizesForBreakpoints = ({
+  small,
+  medium
+}) => {
   const newSizes = fastClone(SIZES);
   if (!small || !medium) {
     return newSizes;
@@ -42,7 +45,4 @@ const getSizesForBreakpoints = ({ small, medium }) => {
   };
   return newSizes;
 };
-export {
-  getMaxWidthQueryForSize,
-  getSizesForBreakpoints
-};
+export { getMaxWidthQueryForSize, getSizesForBreakpoints }

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.4"
+export const SDK_VERSION = "0.5.0"

package/src/context/builder.context.js

@@ -8,7 +8,7 @@ var stdin_default = createContext({
   rootState: {},
   apiKey: null,
   apiVersion: void 0,
-  registeredComponents: {},
+  componentInfos: {},
   inheritedStyles: {}
 });
 export {

package/src/functions/apply-patch-with-mutation.js

@@ -0,0 +1,66 @@
+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;
+};
+const applyPatchWithMinimalMutationChain = (obj, patch, preserveRoot = false) => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const {
+    path,
+    op,
+    value
+  } = patch;
+  const pathArr = path.split(/\//);
+  if (pathArr[0] === "") {
+    pathArr.shift();
+  }
+  const newObj = preserveRoot ? obj : __spreadValues({}, obj);
+  let objPart = newObj;
+  for (let i = 0; i < pathArr.length; i++) {
+    const isLast = i === pathArr.length - 1;
+    const property = pathArr[i];
+    if (isLast) {
+      if (op === "replace") {
+        objPart[property] = value;
+      } else if (op === "add") {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          if (property === "-") {
+            objPart.push(value);
+          } else {
+            objPart.splice(index, 0, value);
+          }
+        } else {
+          objPart[property] = value;
+        }
+      } else if (op === "remove") {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          objPart.splice(index, 1);
+        } else {
+          delete objPart[property];
+        }
+      }
+    } else {
+      const nextProperty = pathArr[i + 1];
+      const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+      objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : __spreadValues({}, newPart);
+    }
+  }
+  return newObj;
+};
+export { applyPatchWithMinimalMutationChain }

package/src/functions/camel-to-kebab-case.js

@@ -1,4 +1,2 @@
-const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-export {
-  camelToKebabCase
-};
+const camelToKebabCase = string => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export { camelToKebabCase }