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

package/src/blocks/columns/columns.jsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,
@@ -73,7 +74,7 @@ function Columns(props) {
       };
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {

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,
@@ -91,7 +92,7 @@ function Symbol(props) {
         customComponents={Object.values(builderContext.registeredComponents)}
         data={{
           ...props.symbol?.data,
-          ...builderContext.state,
+          ...builderContext.localState,
           ...contentToUse?.data?.state,
         }}
         model={props.symbol?.model}

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,
@@ -21,7 +22,9 @@ function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       context: props.context.context,
       shouldEvaluateBindings: true,
     });

package/src/components/render-block/render-block.helpers.js

@@ -58,7 +58,9 @@ const getComponent = ({
   var _a;
   const componentName = (_a = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false
   }).component) == null ? void 0 : _a.name;
@@ -85,7 +87,9 @@ const getRepeatItemData = ({
   }
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context
   });
   if (!Array.isArray(itemsArray)) {
@@ -95,7 +99,7 @@ const getRepeatItemData = ({
   const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
   const repeatArray = itemsArray.map((item, index) => ({
     context: __spreadProps(__spreadValues({}, context), {
-      state: __spreadProps(__spreadValues({}, context.state), {
+      localState: __spreadProps(__spreadValues({}, context.localState), {
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -106,24 +110,8 @@ const getRepeatItemData = ({
   }));
   return repeatArray;
 };
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      var _a;
-      obj[prop] = value;
-      (_a = context.setState) == null ? void 0 : _a.call(context, obj);
-      return true;
-    }
-  });
-  return useState;
-};
 export {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement
 };

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 import {
   FlatList,
@@ -15,7 +16,6 @@ import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
 import {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -33,25 +33,27 @@ function RenderBlock(props) {
     })
   );
 
-  const [repeatItemData, setRepeatItemData] = useState(() =>
-    getRepeatItemData({
+  function repeatItem() {
+    return getRepeatItemData({
       block: props.block,
       context: props.context,
-    })
-  );
+    });
+  }
 
   function useBlock() {
-    return repeatItemData
+    return repeatItem()
       ? props.block
       : getProcessedBlock({
           block: props.block,
-          state: props.context.state,
+          localState: props.context.localState,
+          rootState: props.context.rootState,
+          rootSetState: props.context.rootSetState,
           context: props.context.context,
           shouldEvaluateBindings: true,
         });
   }
 
-  const [tag, setTag] = useState(() => props.block.tagName || "div");
+  const [Tag, setTag] = useState(() => props.block.tagName || "div");
 
   function canShowBlock() {
     if ("hide" in useBlock()) {
@@ -63,14 +65,12 @@ function RenderBlock(props) {
     return true;
   }
 
-  const [proxyState, setProxyState] = useState(() =>
-    getProxyState(props.context)
-  );
-
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: TARGET === "qwik" ? props.context.state : proxyState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
+      localState: props.context.localState,
       context: props.context.context,
     });
   }
@@ -99,7 +99,7 @@ function RenderBlock(props) {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component?.component && !repeatItemData;
+      !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
@@ -119,10 +119,11 @@ function RenderBlock(props) {
     return {
       apiKey: props.context.apiKey,
       apiVersion: props.context.apiVersion,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       content: props.context.content,
       context: props.context.context,
-      setState: props.context.setState,
       registeredComponents: props.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };
@@ -157,14 +158,14 @@ function RenderBlock(props) {
         <>
           {!component?.noWrap ? (
             <>
-              {isEmptyHtmlElement(tag) ? (
+              {isEmptyHtmlElement(Tag) ? (
                 <>
-                  <View {...attributes()} {...actions()} />
+                  <Tag {...attributes()} {...actions()} />
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag) && repeatItemData ? (
+              {!isEmptyHtmlElement(Tag) && repeatItem() ? (
                 <>
-                  {repeatItemData?.map((data, index) => (
+                  {repeatItem()?.map((data, index) => (
                     <RenderRepeatedBlock
                       key={index}
                       repeatContext={data.context}
@@ -173,9 +174,9 @@ function RenderBlock(props) {
                   ))}
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag) && !repeatItemData ? (
+              {!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,13 +14,12 @@ import RenderBlock from "./render-block";
 import BuilderContext from "../../context/builder.context.js";
 
 function RenderComponent(props) {
-  const ComponentRefRef = props.componentRef;
-
   return (
     <BuilderContext.Provider
       value={{
         content: props.context.content,
-        state: props.context.state,
+        rootState: props.context.rootState,
+        localState: props.context.localState,
         context: props.context.context,
         apiKey: props.context.apiKey,
         registeredComponents: props.context.registeredComponents,
@@ -29,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}
@@ -45,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,
@@ -16,8 +17,9 @@ function RenderRepeatedBlock(props) {
     <BuilderContext.Provider
       value={{
         content: props.repeatContext.content,
-        state: props.repeatContext.state,
-        setState: props.repeatContext.setState,
+        localState: props.repeatContext.localState,
+        rootState: props.repeatContext.rootState,
+        rootSetState: props.repeatContext.rootSetState,
         context: props.repeatContext.context,
         apiKey: props.repeatContext.apiKey,
         registeredComponents: props.repeatContext.registeredComponents,

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);
@@ -90,8 +93,8 @@ function RenderContent(props) {
     })
   );
 
-  function setContextState(newState) {
-    setContentState(newState);
+  function contentSetState(newRootState) {
+    setContentState(newRootState);
   }
 
   const [allRegisteredComponents, setAllRegisteredComponents] = useState(() =>
@@ -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,
+        },
       }),
       {}
     )
@@ -159,7 +166,9 @@ function RenderContent(props) {
       evaluate({
         code: jsCode,
         context: props.context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       });
     }
   }
@@ -192,7 +201,9 @@ function RenderContent(props) {
       evaluate({
         code: group,
         context: props.context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       })
     );
   }
@@ -205,7 +216,7 @@ function RenderContent(props) {
           ...contentState,
           [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -240,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(
@@ -261,6 +280,11 @@ function RenderContent(props) {
                 includeRefs: props.includeRefs,
               }
             : {}),
+          ...(props.enrich
+            ? {
+                enrich: props.enrich,
+              }
+            : {}),
         });
         Object.values(allRegisteredComponents).forEach(
           (registeredComponent) => {
@@ -356,8 +380,9 @@ function RenderContent(props) {
     <builderContext.Provider
       value={{
         content: useContent,
-        state: contentState,
-        setState: setContextState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: TARGET === "qwik" ? undefined : contentSetState,
         context: props.context || {},
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
@@ -372,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
+};

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