@builder.io/sdk-react-native 0.4.3 → 0.4.5

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}

@@ -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/components/render-block/block-styles.jsx

@@ -16,7 +16,7 @@ import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
-import RenderInlinedStyles from "../render-inlined-styles";
+import InlinedStyles from "../inlined-styles";
 
 function BlockStyles(props) {
   function useBlock() {
@@ -87,7 +87,7 @@ function BlockStyles(props) {
     <>
       {TARGET !== "reactNative" && css() && canShowBlock() ? (
         <>
-          <RenderInlinedStyles styles={css()} />
+          <InlinedStyles styles={css()} />
         </>
       ) : null}
     </>

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

@@ -9,7 +9,7 @@ import {
   Text,
 } from "react-native";
 import { useState } from "react";
-import RenderInlinedStyles from "../../render-inlined-styles";
+import InlinedStyles from "../../inlined-styles";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 
@@ -39,7 +39,7 @@ ${getFontCss({
 `.trim()
   );
 
-  return <RenderInlinedStyles styles={injectedStyles} />;
+  return <InlinedStyles styles={injectedStyles} />;
 }
 
 export default RenderContentStyles;

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

@@ -38,6 +38,7 @@ 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";
+import InlinedScript from "../inlined-script";
 
 function RenderContent(props) {
   const elementRef = useRef(null);
@@ -216,9 +217,10 @@ 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
+      variationId: props.content?.testVariationId,
       // 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,
     })
   );
 
@@ -397,16 +399,16 @@ function RenderContent(props) {
                   },
                 }
               : {})}
-            {...(props.hideContent
-              ? {
+            {...(props.showContent
+              ? {}
+              : {
                   hidden: true,
                   "aria-hidden": true,
-                }
-              : {})}
+                })}
           >
             {props.isSsrAbTest ? (
               <>
-                <ScrollView dangerouslySetInnerHTML={{ __html: scriptStr }} />
+                <InlinedScript scriptStr={scriptStr} />
               </>
             ) : null}
 

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

@@ -1,23 +1,47 @@
+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";
 import { isBrowser } from "../../functions/is-browser";
-const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
+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) {
+  if (TARGET === "reactNative")
     return false;
-  }
-  if (!canTrack) {
+  if (!hasVariants)
     return false;
-  }
-  if (isBrowser()) {
+  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 = "";
@@ -61,10 +85,10 @@ 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) => {
@@ -75,6 +99,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget2) {
   }
 }
 function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2) {
+  var _a;
   if (!navigator.cookieEnabled) {
     return;
   }
@@ -92,7 +117,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
   }
   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 +138,33 @@ 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})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };
 export {
   checkShouldRunVariants,
   getRenderContentScriptString,
+  getScriptString,
   getVariants,
   getVariantsScriptString
 };

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

@@ -8,75 +8,84 @@ import {
   Image,
   Text,
 } from "react-native";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   checkShouldRunVariants,
+  getScriptString,
   getVariants,
   getVariantsScriptString,
 } from "./helpers";
 import RenderContent from "../render-content/render-content";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
-import RenderInlinedStyles from "../render-inlined-styles";
+import InlinedStyles from "../inlined-styles";
 import { handleABTestingSync } from "../../helpers/ab-tests";
+import InlinedScript from "../inlined-script";
+import { TARGET } from "../../constants/target";
 
 function RenderContentVariants(props) {
+  const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
+    checkShouldRunVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+  );
+
   const [variantScriptStr, setVariantScriptStr] = useState(() =>
     getVariantsScriptString(
       getVariants(props.content).map((value) => ({
-        id: value.id,
+        id: value.testVariationId,
         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; } `)
+      .map((value) => `.variant-${value.testVariationId} { 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),
-        })
-  );
+  useEffect(() => {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+    if (TARGET === "vue2" || TARGET === "vue3") {
+      setShouldRenderVariants(false);
+    }
+  }, []);
 
   return (
     <>
+      {!props.__isNestedRender && TARGET !== "reactNative" ? (
+        <>
+          <InlinedScript scriptStr={getScriptString()} />
+        </>
+      ) : null}
+
       {shouldRenderVariants ? (
         <>
-          <RenderInlinedStyles
+          <InlinedStyles
             id={`variants-styles-${props.content?.id}`}
             styles={hideVariantsStyleString}
           />
-          <View
-            id={`variants-script-${props.content?.id}`}
-            dangerouslySetInnerHTML={{ __html: variantScriptStr }}
-          />
+          <InlinedScript scriptStr={variantScriptStr} />
           {getVariants(props.content)?.map((variant) => (
             <RenderContent
-              key={variant.id}
+              key={variant.testVariationId}
               content={variant}
+              showContent={false}
+              classNameProp={undefined}
+              model={props.model}
+              data={props.data}
+              context={props.context}
               apiKey={props.apiKey}
               apiVersion={props.apiVersion}
-              canTrack={props.canTrack}
               customComponents={props.customComponents}
-              hideContent={true}
-              parentContentId={props.content?.id}
+              canTrack={props.canTrack}
+              locale={props.locale}
+              includeRefs={props.includeRefs}
+              enrich={props.enrich}
               isSsrAbTest={shouldRenderVariants}
             />
           ))}
@@ -84,14 +93,27 @@ function RenderContentVariants(props) {
       ) : null}
 
       <RenderContent
+        {...{}}
+        content={
+          shouldRenderVariants
+            ? props.content
+            : handleABTestingSync({
+                item: props.content,
+                canTrack: getDefaultCanTrack(props.canTrack),
+              })
+        }
+        classNameProp={`variant-${props.content?.id}`}
+        showContent={true}
         model={props.model}
-        content={contentToRender}
+        data={props.data}
+        context={props.context}
         apiKey={props.apiKey}
         apiVersion={props.apiVersion}
-        canTrack={props.canTrack}
         customComponents={props.customComponents}
-        classNameProp={`variant-${props.content?.id}`}
-        parentContentId={props.content?.id}
+        canTrack={props.canTrack}
+        locale={props.locale}
+        includeRefs={props.includeRefs}
+        enrich={props.enrich}
         isSsrAbTest={shouldRenderVariants}
       />
     </>

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.3"
+export const SDK_VERSION = "0.4.5"

package/src/functions/track/index.js

@@ -108,7 +108,7 @@ function _track(eventProps) {
     if (!(isBrowser() || TARGET === "reactNative")) {
       return;
     }
-    return fetch(`https://builder.io/api/v1/track`, {
+    return fetch(`https://cdn.builder.io/api/v1/track`, {
       method: "POST",
       body: JSON.stringify({
         events: [yield createEvent(eventProps)]

package/src/helpers/ab-tests.js

@@ -37,6 +37,7 @@ var __async = (__this, __arguments, generator) => {
 import { getCookie, getCookieSync, setCookie } from "./cookie.js";
 import { checkIsDefined } from "../helpers/nullable.js";
 import { logger } from "./logger.js";
+import { TARGET } from "../constants/target.js";
 const BUILDER_STORE_PREFIX = "builder.tests";
 const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
 const getContentVariationCookie = ({ contentId }) => getCookie({ name: getContentTestKey(contentId), canTrack: true });
@@ -94,6 +95,8 @@ const handleABTestingSync = ({
   item,
   canTrack
 }) => {
+  if (TARGET === "reactNative")
+    return item;
   if (!canTrack) {
     return item;
   }

package/dist/blocks/BaseText.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-/**
- * Implements CSS-like inheritance for `Text` by replacing all calls to `Text` with a custom `BaseText` component that
- * applies the `inheritedStyles` context styles, which contain all styles from all parents that might apply to a `Text`.
- */
-export default function BaseText(props: any): JSX.Element;

package/dist/blocks/button/button.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface ButtonProps {
-    attributes?: any;
-    text?: string;
-    link?: string;
-    openLinkInNewTab?: boolean;
-}
-declare function Button(props: ButtonProps): JSX.Element;
-export default Button;

package/dist/blocks/button/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/columns/columns.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-type Column = {
-    blocks: BuilderBlock[];
-    width?: number;
-};
-type StackColumnsAt = "tablet" | "mobile" | "never";
-export interface ColumnProps {
-    columns?: Column[];
-    builderBlock: BuilderBlock;
-    space?: number;
-    stackColumnsAt?: StackColumnsAt;
-    reverseColumnsWhenStacked?: boolean;
-}
-import type { BuilderBlock } from "../../types/builder-block";
-declare function Columns(props: ColumnProps): JSX.Element;
-export default Columns;

package/dist/blocks/columns/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/custom-code/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/custom-code/custom-code.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-/**
- * TO-DO: need to add way to embed JS code
- */
-export default function Embed(): JSX.Element;

package/dist/blocks/embed/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/embed/embed.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-/**
- * TO-DO: need to add way to embed JS code
- */
-export default function Embed(): JSX.Element;

package/dist/blocks/embed/helpers.d.ts

@@ -1 +0,0 @@
-export declare const isJsScript: (script: HTMLScriptElement) => boolean;

package/dist/blocks/form/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/form/form.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-interface BuilderElement {
-}
-export interface FormProps {
-    attributes?: any;
-    name?: string;
-    action?: string;
-    validate?: boolean;
-    method?: string;
-    builderBlock?: BuilderElement;
-    sendSubmissionsTo?: string;
-    sendSubmissionsToEmail?: string;
-    sendWithJs?: boolean;
-    contentType?: string;
-    customHeaders?: {
-        [key: string]: string;
-    };
-    successUrl?: string;
-    previewState?: FormState;
-    successMessage?: BuilderElement[];
-    errorMessage?: BuilderElement[];
-    sendingMessage?: BuilderElement[];
-    resetFormOnSubmit?: boolean;
-    errorMessagePath?: string;
-}
-export type FormState = "unsubmitted" | "sending" | "success" | "error";
-declare function FormComponent(props: any): JSX.Element;
-export default FormComponent;

package/dist/blocks/fragment/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/fragment/fragment.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface FragmentProps {
-    maxWidth?: number;
-    attributes?: any;
-    children?: any;
-}
-declare function FragmentComponent(props: FragmentProps): JSX.Element;
-export default FragmentComponent;

package/dist/blocks/image/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/image/image.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-type ImageProps = {
-    image: string;
-    backgroundSize?: 'cover' | 'contain';
-    backgroundPosition?: string;
-    aspectRatio?: number;
-    width?: number;
-    height?: number;
-    children?: any;
-    builderBlock: any;
-    fitContent?: boolean;
-};
-/**
- * @param {ImageProps} props
- */
-export default function Image(props: ImageProps): JSX.Element;
-export {};

package/dist/blocks/image/image.helpers.d.ts

@@ -1 +0,0 @@
-export declare function getSrcSet(url: string): string;

package/dist/blocks/img/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/img/img.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export interface ImgProps {
-    attributes?: any;
-    imgSrc?: string;
-    image?: string;
-    altText?: string;
-    backgroundSize?: "cover" | "contain";
-    backgroundPosition?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
-}
-declare function ImgComponent(props: ImgProps): JSX.Element;
-export default ImgComponent;

package/dist/blocks/input/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/input/input.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export interface FormInputProps {
-    type?: string;
-    attributes?: any;
-    name?: string;
-    value?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    required?: boolean;
-}
-declare function FormInputComponent(props: FormInputProps): JSX.Element;
-export default FormInputComponent;

package/dist/blocks/raw-text/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/raw-text/raw-text.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-/**
- * TO-DO: Implement
- */
-export default function RawText(): JSX.Element;

package/dist/blocks/section/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/section/section.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface SectionProps {
-    maxWidth?: number;
-    attributes?: any;
-    children?: any;
-    builderBlock?: any;
-}
-declare function SectionComponent(props: SectionProps): JSX.Element;
-export default SectionComponent;

package/dist/blocks/select/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/dist/blocks/select/select.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-export interface FormSelectProps {
-    options?: {
-        name?: string;
-        value: string;
-    }[];
-    attributes?: any;
-    name?: string;
-    value?: string;
-    defaultValue?: string;
-}
-declare function SelectComponent(props: any): JSX.Element;
-export default SelectComponent;

package/dist/blocks/submit-button/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;