@builder.io/sdk-react-native 4.0.2 → 4.0.5

package/src/blocks/custom-code/custom-code.tsx

@@ -19,15 +19,18 @@ export interface CustomCodeProps {
   replaceNodes?: boolean;
 }
 
+import { isEditing } from "../../functions/is-editing";
+import { logger } from "../../helpers/logger";
+
 function CustomCode(props: CustomCodeProps) {
   const elementRef = useRef<any>(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
   const [scriptsRun, setScriptsRun] = useState(() => []);
 
-  useEffect(() => {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
+  function runScripts() {
     if (
+      !elementRef.current ||
       !elementRef.current?.getElementsByTagName ||
       typeof window === "undefined"
     ) {
@@ -60,12 +63,25 @@ function CustomCode(props: CustomCodeProps) {
           scriptsRun.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
-          console.warn("`CustomCode`: Error running script:", error);
+          logger.warn(
+            "[BUILDER.IO] `CustomCode`: Error running script:",
+            error
+          );
         }
       }
     }
+  }
+
+  useEffect(() => {
+    runScripts();
   }, []);
 
+  useEffect(() => {
+    if (isEditing()) {
+      runScripts();
+    }
+  }, [props.code]);
+
   return (
     <View ref={elementRef} dangerouslySetInnerHTML={{ __html: props.code }} />
   );

package/src/blocks/embed/embed.tsx

@@ -18,6 +18,7 @@ export interface EmbedProps {
   content: string;
 }
 
+import { logger } from "../../helpers/logger";
 import { isJsScript } from "./helpers";
 
 function Embed(props: EmbedProps) {
@@ -44,7 +45,7 @@ function Embed(props: EmbedProps) {
           scriptsRun.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
-          console.warn("`Embed`: Error running script:", error);
+          logger.warn("[BUILDER.IO] `Embed`: Error running script:", error);
         }
       }
     }

package/src/blocks/image/component-info.ts

@@ -89,6 +89,10 @@ export const componentInfo: ComponentInfo = {
     name: 'altText',
     type: 'string',
     helperText: 'Text to display when the user has images off'
+  }, {
+    name: 'title',
+    type: 'string',
+    helperText: 'Text to display when hovering over the asset'
   }, {
     name: 'height',
     type: 'number',

package/src/blocks/image/image.types.ts

@@ -9,6 +9,7 @@ export interface ImageProps {
   height?: number;
   width?: number;
   altText?: string;
+  title?: string;
   backgroundSize?: 'cover' | 'contain';
   backgroundPosition?: string;
   srcset?: string;

package/src/components/block/components/component-ref/component-ref.tsx

@@ -12,7 +12,7 @@ import {
   Button,
   Linking,
 } from "react-native";
-import { useState, useContext } from "react";
+import { useState, useContext, useEffect } from "react";
 import { wrapComponentRef } from "../../../content/wrap-component-ref";
 import Block from "../../block";
 import InteractiveElement from "../interactive-element";
@@ -21,10 +21,14 @@ import { getWrapperProps } from "./component-ref.helpers";
 import BuilderContext from "../../../../context/builder.context";
 
 function ComponentRef(props: ComponentProps) {
+  const [shouldUpdate, setShouldUpdate] = useState(() => false);
+
   const [Wrapper, setWrapper] = useState(() =>
     props.isInteractive ? InteractiveElement : props.componentRef
   );
 
+  useEffect(() => {}, [props.componentOptions, props.blockChildren]);
+
   return (
     <BuilderContext.Provider
       value={{

package/src/components/blocks/blocks-wrapper.tsx

@@ -12,7 +12,7 @@ import {
   Button,
   Linking,
 } from "react-native";
-import { useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 
 export type BlocksWrapperProps = {
   blocks: BuilderBlock[] | undefined;
@@ -35,6 +35,8 @@ import type { BuilderBlock } from "../../types/builder-block";
 
 function BlocksWrapper(props: BlocksWrapperProps) {
   const blocksWrapperRef = useRef<HTMLDivElement>(null);
+  const [shouldUpdate, setShouldUpdate] = useState(() => false);
+
   function className() {
     return [
       "builder-blocks",
@@ -106,6 +108,8 @@ function BlocksWrapper(props: BlocksWrapperProps) {
     }
   }, []);
 
+  useEffect(() => {}, [props.blocks]);
+
   return (
     <props.BlocksWrapper
       ref={blocksWrapperRef}

package/src/components/content-variants/helpers.ts

@@ -52,6 +52,7 @@ type VariantData = {
   testRatio?: number;
 };
 const getIsHydrationTarget = (target: Target) => target === 'react' || target === 'reactNative';
+const isAngularSDK = TARGET === 'angular';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
@@ -59,7 +60,7 @@ export const getInitVariantsFnsScriptString = () => `
   `;
 export const getUpdateCookieAndStylesScript = (variants: VariantData[], contentId: string) => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
-    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}, ${isAngularSDK}
   )`;
 export const getUpdateVariantVisibilityScript = ({
   contentId,

package/src/components/content-variants/inlined-fns.ts

@@ -18,5 +18,5 @@ type VariantData = {
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
 
-export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.2"
+export const SDK_VERSION = "4.0.5"