@builder.io/sdk-react-native 4.0.7 → 4.0.9

package/src/blocks/personalization-container/helpers.ts

@@ -2,8 +2,13 @@ import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
 import type { BuilderBlock } from '../../types/builder-block';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT } from './helpers/inlined-fns';
+import type { Target } from '../../types/targets';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 import type { PersonalizationContainerProps } from './personalization-container.types';
+export const DEFAULT_INDEX = 'default';
+const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
+const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
+const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
 export type UserAttributes = {
   date?: string | Date;
   urlPath?: string;
@@ -16,12 +21,33 @@ export type Query = {
   operator: QueryOperator;
   value: QueryValue;
 };
+type BlocksToRenderReturnType = {
+  blocks: BuilderBlock[];
+  path: string;
+  index: number | typeof DEFAULT_INDEX;
+};
+
+/**
+ * SDKs that support Variant Containers
+ */
+export const SDKS_SUPPORTING_PERSONALIZATION = (['react', 'vue', 'svelte'] as Target[]);
+
+/**
+ * After hydration, we reset the tree
+ * These SDKs handle Personalization Container in a special way:
+ * - first, the inlined script will help us add `display: none`, `aria-hidden: true` and `hidden: true` to the non-winning variants
+ * - then, on mount / when the component is hydrated - we reset the tree with only the winning variant and deleting the entire tree
+ *
+ * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
+ * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
+ */
+export const SDKS_REQUIRING_RESET_APPROACH = (['vue', 'svelte'] as Target[]);
 export function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean) {
   const hasVariants = variants && variants.length > 0;
   if (TARGET === 'reactNative') return false;
   if (!hasVariants) return false;
   if (!canTrack) return false;
-  if (TARGET === 'vue' || TARGET === 'svelte') return true;
+  if (SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) return true;
   if (isBrowser()) return false;
   return true;
 }
@@ -37,22 +63,23 @@ export function getBlocksToRender({
   isHydrated: boolean;
   filteredVariants: PersonalizationContainerProps['variants'];
   fallbackBlocks?: BuilderBlock[];
-}): {
-  blocks: BuilderBlock[];
-  path: string | undefined;
-} {
-  const fallback = {
+}): BlocksToRenderReturnType {
+  const fallback: BlocksToRenderReturnType = {
     blocks: fallbackBlocks ?? [],
-    path: 'this.children'
+    path: 'this.children',
+    index: DEFAULT_INDEX
   };
   if (isHydrated && isEditing()) {
     // If editing a specific variant
     if (typeof previewingIndex === 'number' && previewingIndex < (variants?.length ?? 0)) {
-      const variant = variants![previewingIndex];
-      return {
-        blocks: variant.blocks,
-        path: `component.options.variants.${previewingIndex}.blocks`
-      };
+      const variant = variants?.[previewingIndex];
+      if (variant) {
+        return {
+          blocks: variant.blocks,
+          path: `variants.${previewingIndex}.blocks`,
+          index: previewingIndex
+        };
+      }
     }
     // Otherwise we're editing the default variant
     return fallback;
@@ -61,24 +88,33 @@ export function getBlocksToRender({
   // If we're on the browser, check if there's a winning variant
   if (isBrowser()) {
     const winningVariant = filteredVariants?.[0];
-    if (winningVariant) {
-      return {
-        blocks: winningVariant.blocks,
-        path: `component.options.variants.${variants?.indexOf(winningVariant)}.blocks`
-      };
+    if (winningVariant && variants) {
+      const variantIndex = variants.indexOf(winningVariant);
+      if (variantIndex !== -1) {
+        return {
+          blocks: winningVariant.blocks,
+          path: `variants.${variantIndex}.blocks`,
+          index: variantIndex
+        };
+      }
     }
   }
 
   // If no winning variant or we are on the server, return the default variant
   return fallback;
 }
-export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+export const getInitPersonalizationVariantsFnsScriptString = () => {
   return `
-  (function() {
-    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
-    ${PERSONALIZATION_SCRIPT}
-    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ''})
-  })();
+  window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+  window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT}
   `;
 };
+const isHydrationTarget = TARGET === 'react';
+export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
+export const getUpdateVisibilityStylesScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
 export { filterWithCustomTargeting } from './helpers/inlined-fns'

package/src/blocks/personalization-container/personalization-container.tsx

@@ -16,17 +16,24 @@ import { useState, useRef, useEffect } from "react";
 import Blocks from "../../components/blocks/blocks";
 import InlinedScript from "../../components/inlined-script";
 import InlinedStyles from "../../components/inlined-styles";
+import { TARGET } from "../../constants/target";
+import { getClassPropName } from "../../functions/get-class-prop-name";
 import { isEditing } from "../../functions/is-editing";
 import { isPreviewing } from "../../functions/is-previewing";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
 import { userAttributesService } from "../../helpers/user-attributes";
+import { filterAttrs } from "../helpers";
 import {
   checkShouldRenderVariants,
+  DEFAULT_INDEX,
   filterWithCustomTargeting,
   getBlocksToRender,
   getPersonalizationScript,
+  getUpdateVisibilityStylesScript,
+  SDKS_REQUIRING_RESET_APPROACH,
 } from "./helpers";
 import type { PersonalizationContainerProps } from "./personalization-container.types";
+import { setAttrs } from "../helpers";
 
 function PersonalizationContainer(props: PersonalizationContainerProps) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -42,6 +49,15 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     )
   );
 
+  const [updateVisibilityStylesScript, setUpdateVisibilityStylesScript] =
+    useState(() =>
+      getUpdateVisibilityStylesScript(
+        props.variants,
+        props.builderBlock?.id || "none",
+        props.builderContext?.rootState?.locale as string | undefined
+      )
+    );
+
   const [unsubscribers, setUnsubscribers] = useState(() => []);
 
   const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
@@ -51,7 +67,17 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     )
   );
 
-  const [isHydrated, setIsHydrated] = useState(() => false);
+  const [shouldResetVariants, setShouldResetVariants] = useState(() => false);
+
+  function attrs() {
+    return {
+      ...props.attributes,
+      ...{},
+      [getClassPropName()]: `builder-personalization-container ${
+        props.attributes[getClassPropName()] || ""
+      }`,
+    };
+  }
 
   function filteredVariants() {
     return (props.variants || []).filter((variant) => {
@@ -75,7 +101,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     return getBlocksToRender({
       variants: props.variants,
       fallbackBlocks: props.builderBlock?.children,
-      isHydrated: isHydrated,
+      isHydrated: shouldResetVariants,
       filteredVariants: filteredVariants(),
       previewingIndex: props.previewingIndex,
     });
@@ -85,13 +111,13 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     return (props.variants || [])
       .map(
         (_, index) =>
-          `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `
+          `div[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none !important; } `
       )
       .join("");
   }
 
   useEffect(() => {
-    setIsHydrated(true);
+    setShouldResetVariants(true);
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs) => {
         setUserAttributes(attrs);
@@ -103,7 +129,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
         rootRef.current.dispatchEvent(
           new CustomEvent("builder.variantLoaded", {
             detail: {
-              variant: variant || "default",
+              variant: variant || DEFAULT_INDEX,
               content: props.builderContext?.content,
             },
             bubbles: true,
@@ -115,7 +141,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
               rootRef.current.dispatchEvent(
                 new CustomEvent("builder.variantDisplayed", {
                   detail: {
-                    variant: variant || "default",
+                    variant: variant || DEFAULT_INDEX,
                     content: props.builderContext?.content,
                   },
                   bubbles: true,
@@ -137,38 +163,85 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
   }, []);
 
   return (
-    <View ref={rootRef} {...props.attributes}>
-      {shouldRenderVariants ? (
+    <View ref={rootRef} {...attrs()}>
+      {shouldResetVariants && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) ? (
+        <Blocks
+          blocks={blocksToRender().blocks}
+          parent={props.builderBlock?.id}
+          path={blocksToRender().path}
+          context={props.builderContext}
+          registeredComponents={props.builderComponents}
+          BlocksWrapperProps={{
+            ...props.builderContext?.BlocksWrapperProps,
+            "data-variant-id": `${props.builderBlock?.id}-${
+              blocksToRender().index
+            }`,
+          }}
+        />
+      ) : null}
+      {(!shouldResetVariants &&
+        SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) ||
+      !SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) ? (
         <>
-          {props.variants?.map((variant, index) => (
-            <View
-              key={index}
-              data-variant-id={`${props.builderBlock?.id}-${index}`}
-            >
-              <Blocks
-                blocks={variant.blocks}
-                parent={props.builderBlock?.id}
-                path={`component.options.variants.${index}.blocks`}
+          {shouldRenderVariants ? (
+            <>
+              <InlinedStyles
+                nonce={props.builderContext?.nonce || ""}
+                styles={hideVariantsStyleString()}
+                id={`variants-styles-${props.builderBlock?.id}`}
+              />
+              <InlinedScript
+                nonce={props.builderContext?.nonce || ""}
+                scriptStr={updateVisibilityStylesScript}
+                id={`variants-visibility-script-${props.builderBlock?.id}`}
+              />
+              {props.variants?.map((variant, index) => (
+                <Blocks
+                  key={`${props.builderBlock?.id}-${index}`}
+                  BlocksWrapperProps={{
+                    ...props.builderContext?.BlocksWrapperProps,
+                    "aria-hidden": true,
+                    hidden: true,
+                    "data-variant-id": `${props.builderBlock?.id}-${index}`,
+                  }}
+                  blocks={variant.blocks}
+                  parent={props.builderBlock?.id}
+                  path={`component.options.variants.${index}.blocks`}
+                  context={props.builderContext}
+                  registeredComponents={props.builderComponents}
+                >
+                  <InlinedScript
+                    nonce={props.builderContext?.nonce || ""}
+                    scriptStr={scriptStr}
+                    id={`variants-script-${props.builderBlock?.id}-${index}`}
+                  />
+                </Blocks>
+              ))}
+            </>
+          ) : null}
+          <Blocks
+            blocks={blocksToRender().blocks}
+            parent={props.builderBlock?.id}
+            path={blocksToRender().path}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
+            BlocksWrapperProps={{
+              ...props.builderContext?.BlocksWrapperProps,
+              "data-variant-id": `${props.builderBlock?.id}-${
+                blocksToRender().index
+              }`,
+            }}
+          >
+            {shouldRenderVariants ? (
+              <InlinedScript
+                nonce={props.builderContext?.nonce || ""}
+                scriptStr={scriptStr}
+                id={`variants-script-${props.builderBlock?.id}-${DEFAULT_INDEX}`}
               />
-            </View>
-          ))}
-          <InlinedStyles
-            nonce={props.builderContext?.nonce || ""}
-            styles={hideVariantsStyleString()}
-            id={`variants-styles-${props.builderBlock?.id}`}
-          />
-          <InlinedScript
-            nonce={props.builderContext?.nonce || ""}
-            scriptStr={scriptStr}
-            id={`variants-script-${props.builderBlock?.id}`}
-          />
+            ) : null}
+          </Blocks>
         </>
       ) : null}
-      <Blocks
-        blocks={blocksToRender().blocks}
-        parent={props.builderBlock?.id}
-        path={blocksToRender().path}
-      />
     </View>
   );
 }

package/src/blocks/personalization-container/personalization-container.types.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
-import type { BuilderDataProps } from '../../types/builder-props';
+import type { BuilderComponentsProp, BuilderDataProps } from '../../types/builder-props';
 import type { Query } from './helpers';
 export type PersonalizationContainerProps = {
   children?: any;
@@ -11,4 +11,4 @@ export type PersonalizationContainerProps = {
     startDate?: string;
     endDate?: string;
   }>;
-} & BuilderDataProps
+} & BuilderDataProps & BuilderComponentsProp

package/src/blocks/symbol/symbol.tsx

@@ -47,14 +47,17 @@ function Symbol(props: SymbolProps) {
 
   const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
 
+  const [symbolEntry, setSymbolEntry] = useState(() => props.symbol?.entry);
+
   function setContent() {
-    if (contentToUse) return;
+    if (contentToUse && symbolEntry === props.symbol?.entry) return;
     fetchSymbolContent({
       symbol: props.symbol,
       builderContextValue: props.builderContext,
     }).then((newContent) => {
       if (newContent) {
         setContentToUse(newContent);
+        setSymbolEntry(props.symbol?.entry);
       }
     });
   }

package/src/components/block/components/interactive-element.tsx

@@ -12,6 +12,7 @@ import {
   Button,
   Linking,
 } from "react-native";
+import { useState, useEffect } from "react";
 
 export type InteractiveElementProps = {
   Wrapper: any;
@@ -29,6 +30,8 @@ import type { Dictionary } from "../../../types/typescript";
 import Awaiter from "../../awaiter";
 
 function InteractiveElement(props: InteractiveElementProps) {
+  const [forceRenderCount, setForceRenderCount] = useState(() => 0);
+
   function attributes() {
     return props.includeBlockProps
       ? {
@@ -51,6 +54,8 @@ function InteractiveElement(props: InteractiveElementProps) {
     return props.wrapperProps;
   }
 
+  useEffect(() => {}, [props.wrapperProps, props.block?.component?.options]);
+
   return (
     <>
       {props.Wrapper.load ? (

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

@@ -24,7 +24,19 @@ export type BlocksWrapperProps = {
    */
   BlocksWrapper: any;
   /**
-   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   * Props to be applied to the wrapping element of blocks. Can be set in two ways:
+   * 1. Globally via `<Content blocksWrapperProps={{...}}/>` - applies to all blocks wrappers in the Content
+   * 2. Locally via `<Blocks BlocksWrapperProps={{...}}/>` - applies only to this specific blocks instance and overrides global props
+   *
+   * For merging both global and local props, spread the context props before adding your own:
+   * ```
+   * <Blocks
+   *   BlocksWrapperProps={{
+   *     ...builderContext.BlocksWrapperProps,
+   *     'data-test-id': 'my-test-id'
+   *   }}
+   * />
+   * ```
    */
   BlocksWrapperProps: any;
   children?: any;

package/src/components/blocks/blocks.tsx

@@ -54,14 +54,17 @@ function Blocks(props: BlocksProps) {
       parent={props.parent}
       path={props.path}
       styleProp={props.styleProp}
+      BlocksWrapperProps={
+        props.BlocksWrapperProps ||
+        props.context?.BlocksWrapperProps ||
+        builderContext?.BlocksWrapperProps
+      }
       classNameProp={props.className}
       BlocksWrapper={
         props.context?.BlocksWrapper || builderContext?.BlocksWrapper
       }
-      BlocksWrapperProps={
-        props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps
-      }
     >
+      {props.children}
       {props.blocks ? (
         <FlatList
           data={props.blocks}

package/src/components/blocks/blocks.types.ts

@@ -1,6 +1,6 @@
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'classNameProp'>> & {
   context?: BuilderContextInterface;
   registeredComponents?: RegisteredComponents;
   linkComponent?: any;

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

@@ -20,6 +20,10 @@ type VariantsProviderProps = ContentVariantsPrps & {
    */
   isNestedRender?: boolean;
 };
+import {
+  SDKS_SUPPORTING_PERSONALIZATION,
+  getInitPersonalizationVariantsFnsScriptString,
+} from "../../blocks/personalization-container/helpers";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -79,11 +83,20 @@ function ContentVariants(props: VariantsProviderProps) {
   return (
     <>
       {!props.isNestedRender && TARGET !== "reactNative" ? (
-        <InlinedScript
-          id="builderio-init-variants-fns"
-          scriptStr={getInitVariantsFnsScriptString()}
-          nonce={props.nonce || ""}
-        />
+        <>
+          <InlinedScript
+            id="builderio-init-variants-fns"
+            scriptStr={getInitVariantsFnsScriptString()}
+            nonce={props.nonce || ""}
+          />
+          {SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? (
+            <InlinedScript
+              id="builderio-init-personalization-variants-fns"
+              nonce={props.nonce || ""}
+              scriptStr={getInitPersonalizationVariantsFnsScriptString()}
+            />
+          ) : null}
+        </>
       ) : null}
       {shouldRenderVariants ? (
         <>

package/src/constants/builder-registered-components.ts

@@ -9,6 +9,7 @@ import { default as Fragment } from '../blocks/fragment/index';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info';
 import { default as Image } from '../blocks/image/index';
 import { componentInfo as personalizationContainerComponentInfo } from '../blocks/personalization-container/component-info';
+import { SDKS_SUPPORTING_PERSONALIZATION } from '../blocks/personalization-container/helpers';
 import { default as PersonalizationContainer } from '../blocks/personalization-container/index';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info';
 import { default as Section } from '../blocks/section/index';
@@ -52,7 +53,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Text,
   ...textComponentInfo
-}, ...(TARGET === 'react' ? [{
+}, ...(SDKS_SUPPORTING_PERSONALIZATION.includes(TARGET) ? [{
   component: PersonalizationContainer,
   ...personalizationContainerComponentInfo
 }] : []), ...(TARGET === 'rsc' ? [] : [{

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.7"
+export const SDK_VERSION = "4.0.9"