@builder.io/sdk-react-native 4.2.1 → 4.2.3

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

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { Text } from "react-native";
 import { useState, useEffect } from "react";
 
 export type InteractiveElementProps = {
@@ -22,12 +10,15 @@ export type InteractiveElementProps = {
   includeBlockProps: boolean;
   children?: any;
 };
+import { TARGET } from "../../../constants/target";
 import type { BuilderContextInterface } from "../../../context/types";
 import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
+import { isEditing } from "../../../server-index";
 import type { BuilderBlock } from "../../../types/builder-block";
 import type { Dictionary } from "../../../types/typescript";
 import Awaiter from "../../awaiter";
+import LiveEdit from "../../live-edit";
 
 function InteractiveElement(props: InteractiveElementProps) {
   const [forceRenderCount, setForceRenderCount] = useState(() => 0);
@@ -69,6 +60,14 @@ function InteractiveElement(props: InteractiveElementProps) {
             {props.children}
           </Awaiter>
         </>
+      ) : TARGET === "rsc" && isEditing() ? (
+        <LiveEdit
+          Wrapper={props.Wrapper}
+          id={props.block.id || ""}
+          attributes={attributes()}
+        >
+          {props.children}
+        </LiveEdit>
       ) : (
         <props.Wrapper {...targetWrapperProps()} attributes={attributes()}>
           {props.children}

package/src/components/block/components/live-edit-block-styles.tsx

@@ -0,0 +1,154 @@
+import * as React from "react";
+import {} from "react-native";
+
+type LiveEditBlockStylesProps = {
+  id?: any;
+  contextProvider: BuilderContextInterface;
+};
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../../constants/device-sizes";
+import { TARGET } from "../../../constants/target";
+import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
+import { getProcessedBlock } from "../../../functions/get-processed-block";
+import { createCssClass } from "../../../helpers/css";
+import { findBlockById } from "../../../helpers/find-block";
+import { checkIsDefined } from "../../../helpers/nullable";
+import type {
+  BuilderBlock,
+  BuilderContextInterface,
+} from "../../../server-index";
+import InlinedStyles from "../../inlined-styles";
+
+function LiveEditBlockStyles(props: LiveEditBlockStylesProps) {
+  function block() {
+    return findBlockById(props.contextProvider.content!, props.id);
+  }
+
+  function processedBlock() {
+    const foundBlock = block();
+    if (!foundBlock) {
+      return null;
+    }
+    const blockToUse = foundBlock.repeat?.collection
+      ? foundBlock
+      : getProcessedBlock({
+          block: foundBlock,
+          localState: props.contextProvider.localState,
+          rootState: props.contextProvider.rootState,
+          rootSetState: props.contextProvider.rootSetState,
+          context: props.contextProvider.context,
+        });
+    return blockToUse;
+  }
+
+  function canShowBlock() {
+    if (checkIsDefined(processedBlock?.()?.hide)) {
+      return !processedBlock?.()?.hide;
+    }
+    if (checkIsDefined(processedBlock?.()?.show)) {
+      return processedBlock?.()?.show;
+    }
+    return true;
+  }
+
+  function css() {
+    const styles = processedBlock?.()?.responsiveStyles;
+    const content = props.contextProvider.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+      content?.meta?.breakpoints || {}
+    );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
+    const className = processedBlock?.()?.id;
+    if (!className) {
+      return "";
+    }
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "medium",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "small",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const xsmallStylesClass =
+      xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "xsmall",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+    const hoverAnimation =
+      processedBlock().animations &&
+      processedBlock().animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+      const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+      hoverStylesClass =
+        createCssClass({
+          className: `${className}:hover`,
+          styles: {
+            ...hoverStyles,
+            transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(
+              hoverAnimation.easing
+            )}`,
+            transitionDelay: hoverAnimation.delay
+              ? `${hoverAnimation.delay}s`
+              : "0s",
+          },
+        }) || "";
+    }
+    return [
+      largeStylesClass,
+      mediumStylesClass,
+      smallStylesClass,
+      xsmallStylesClass,
+      hoverStylesClass,
+    ].join(" ");
+  }
+
+  return (
+    <>
+      {TARGET === "rsc" && css() && canShowBlock() ? (
+        <>
+          <InlinedStyles
+            id="builderio-block"
+            styles={css()}
+            nonce={props.contextProvider.nonce}
+          />
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default LiveEditBlockStyles;

package/src/components/block/components/repeated-block.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import {} from "react-native";
 import { useState, useContext, useEffect } from "react";
 
 type Props = Omit<BlockProps, "context"> & {

package/src/components/block/components/style-wrapper.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import {} from "react-native";
+import { useState, useContext, useEffect } from "react";
+
+type StyleWrapperProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  id?: string;
+};
+import { TARGET } from "../../../constants/target";
+import { BuilderContext } from "../../../context/index";
+import {
+  isEditing,
+  BuilderBlock,
+  BuilderContextInterface,
+} from "../../../server-index";
+import BlockStyles from "./block-styles";
+import LiveEditBlockStyles from "./live-edit-block-styles";
+
+function StyleWrapper(props: StyleWrapperProps) {
+  const [isClientEditing, setIsClientEditing] = useState(() => false);
+
+  const [isHydrated, setIsHydrated] = useState(() => false);
+
+  const contextProvider = useContext(BuilderContext);
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      {isHydrated ? (
+        <>
+          {TARGET === "rsc" && isClientEditing ? (
+            <LiveEditBlockStyles
+              id={props.block.id}
+              contextProvider={contextProvider}
+            />
+          ) : (
+            <>
+              <BlockStyles block={props.block} context={props.context} />
+            </>
+          )}
+        </>
+      ) : (
+        <>
+          <BlockStyles block={props.block} context={props.context} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default StyleWrapper;

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

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { StyleSheet, Text } from "react-native";
 import { useState, useRef, useEffect } from "react";
 
 export type BlocksWrapperProps = {

package/src/components/blocks/blocks.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { FlatList, Text } from "react-native";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context";
 import ComponentsContext from "../../context/components.context";

package/src/components/content/components/enable-editor.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { StyleSheet, Text } from "react-native";
 import { useState, useContext, useRef, useEffect } from "react";
 
 type BuilderEditorProps = Omit<
@@ -63,7 +51,10 @@ import { getInteractionPropertiesForEvent } from "../../../functions/track/inter
 import { getDefaultCanTrack } from "../../../helpers/canTrack";
 import { getCookieSync } from "../../../helpers/cookie";
 import { postPreviewContent } from "../../../helpers/preview-lru-cache/set";
-import { createEditorListener } from "../../../helpers/subscribe-to-editor";
+import {
+  createEditorListener,
+  EditType,
+} from "../../../helpers/subscribe-to-editor";
 import { setupBrowserForEditing } from "../../../scripts/init-editing";
 import type { BuilderContent } from "../../../types/builder-content";
 import type { ComponentInfo } from "../../../types/components";
@@ -76,12 +67,21 @@ import type {
 } from "../content.types";
 import { needsElementRefDivForEditing } from "./enable-editor.helpers";
 import { getWrapperClassName } from "./styles.helpers";
+import { ScrollView } from "react-native";
 
 function EnableEditor(props: BuilderEditorProps) {
   const elementRef = useRef<HTMLDivElement>(null);
   const [hasExecuted, setHasExecuted] = useState<boolean>(() => false);
 
-  function mergeNewRootState(newData: Dictionary<any>) {
+  const [contextValue, setContextValue] = useState<any>(
+    () => props.builderContextSignal
+  );
+
+  const [prevData, setPrevData] = useState(() => null);
+
+  const [prevLocale, setPrevLocale] = useState(() => "");
+
+  function mergeNewRootState(newData: Dictionary<any>, editType?: EditType) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
       ...newData,
@@ -94,9 +94,17 @@ function EnableEditor(props: BuilderEditorProps) {
         rootState: combinedState,
       }));
     }
+    if (props.builderContextSignal.rootSetState) {
+      props.builderContextSignal.rootSetState(combinedState);
+    } else {
+      props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+        ...PREVIOUS_VALUE,
+        rootState: combinedState,
+      }));
+    }
   }
 
-  function mergeNewContent(newContent: BuilderContent) {
+  function mergeNewContent(newContent: BuilderContent, editType?: EditType) {
     const newContentValue = {
       ...props.builderContextSignal.content,
       ...newContent,
@@ -155,11 +163,11 @@ function EnableEditor(props: BuilderEditorProps) {
         animation: (animation) => {
           triggerAnimation(animation);
         },
-        contentUpdate: (newContent) => {
-          mergeNewContent(newContent);
+        contentUpdate: (newContent, editType) => {
+          mergeNewContent(newContent, editType);
         },
-        stateUpdate: (newState) => {
-          mergeNewRootState(newState);
+        stateUpdate: (newState, editType) => {
+          mergeNewRootState(newState, editType);
         },
       },
     })(event);
@@ -236,11 +244,15 @@ function EnableEditor(props: BuilderEditorProps) {
               method: "GET",
             };
         logFetch(JSON.stringify(fetchRequestObj));
-        fetch(fetchRequestObj.url, {
+        const fetchOptions = {
           method: fetchRequestObj.method,
           headers: fetchRequestObj.headers,
           body: fetchRequestObj.body,
-        })
+        };
+        if (fetchRequestObj.method === "GET") {
+          delete fetchOptions.body;
+        }
+        fetch(fetchRequestObj.url, fetchOptions)
           .then((response) => response.json())
           .then((json) => {
             mergeNewRootState({
@@ -485,14 +497,22 @@ function EnableEditor(props: BuilderEditorProps) {
   }, [props.builderContextSignal.rootState]);
   useEffect(() => {
     if (props.data) {
+      if (prevData === props.data) {
+        return;
+      }
       mergeNewRootState(props.data);
+      setPrevData(props.data);
     }
   }, [props.data]);
   useEffect(() => {
     if (props.locale) {
+      if (prevLocale === props.locale) {
+        return;
+      }
       mergeNewRootState({
         locale: props.locale,
       });
+      setPrevLocale(props.locale);
     }
   }, [props.locale]);
   useEffect(() => {

package/src/components/content/components/styles.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import {} from "react-native";
 import { useState } from "react";
 
 interface Props extends BuilderNonceProp {

package/src/components/content/content.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import {} from "react-native";
 import { useState, useContext, useRef } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components";
 import { TARGET } from "../../constants/target";
@@ -38,6 +26,7 @@ import {
 } from "./content.helpers";
 import type { ContentProps } from "./content.types";
 import { wrapComponentRef } from "./wrap-component-ref";
+import { ScrollView } from "react-native";
 
 function ContentComponent(props: ContentProps) {
   const [scriptStr, setScriptStr] = useState(() =>

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

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import {} from "react-native";
 import { useState, useEffect } from "react";
 
 type VariantsProviderProps = ContentVariantsPrps & {

package/src/components/dynamic-div.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, Text } from "react-native";
 
 export interface DynamicDivProps {
   children?: any;

package/src/components/dynamic-renderer/dynamic-renderer.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { Text } from "react-native";
 
 export interface DynamicRendererProps {
   children?: any;

package/src/components/live-edit.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { useContext } from "react";
+
+type LiveEditProps = {
+  children?: any;
+  id?: any;
+  Wrapper?: any;
+  attributes?: any;
+};
+import { BuilderContext } from "../context/index";
+import { findBlockById } from "../helpers/find-block";
+
+function LiveEdit(props: LiveEditProps) {
+  function block() {
+    return findBlockById(context.content!, props.id);
+  }
+
+  function options() {
+    return block?.()?.component?.options || {};
+  }
+
+  const context = useContext(BuilderContext);
+
+  return (
+    <props.Wrapper {...options()} attributes={props.attributes}>
+      {props.children}
+    </props.Wrapper>
+  );
+}
+
+export default LiveEdit;

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.2.1"
+export const SDK_VERSION = "4.2.3"

package/src/functions/get-content/generate-content-url.ts

@@ -39,15 +39,10 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   url.searchParams.set('limit', String(limit));
   url.searchParams.set('noTraverse', String(noTraverse));
   url.searchParams.set('includeRefs', String(true));
-  const finalLocale = locale || userAttributes?.locale;
-  let finalUserAttributes: Record<string, any> = userAttributes || {};
-  if (finalLocale) {
-    url.searchParams.set('locale', finalLocale);
-    finalUserAttributes = {
-      locale: finalLocale,
-      ...finalUserAttributes
-    };
+  if (locale) {
+    url.searchParams.set('locale', locale);
   }
+  let finalUserAttributes: Record<string, any> = userAttributes || {};
   if (enrich) url.searchParams.set('enrich', String(enrich));
   url.searchParams.set('omit', omit ?? 'meta.componentsUsed');
   if (fields) {

package/src/functions/get-content/index.ts

@@ -15,6 +15,14 @@ const checkContentHasResults = (content: ContentResponse): content is ContentRes
  * Returns the first content entry that matches the given options.
  */
 export async function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null> {
+  const finalLocale = options.locale || options.userAttributes?.locale;
+  if (finalLocale) {
+    options.locale = finalLocale;
+    options.userAttributes = {
+      locale: finalLocale,
+      ...options.userAttributes
+    };
+  }
   const allContent = await fetchEntries({
     ...options,
     limit: 1

package/src/helpers/find-block.ts

@@ -0,0 +1,40 @@
+import type { BuilderBlock, BuilderContent } from '../server-index';
+
+/**
+ * Recursively searches for a block by ID.
+ *
+ * @param content The Builder content to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ */
+export const findBlockById = (content: BuilderContent, id: string): BuilderBlock | null => {
+  return findBlockInTree(content.data?.blocks, id);
+};
+
+/**
+ * Helper function to recursively search through block tree.
+ *
+ * @param blocks The blocks to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ * @private This is an internal implementation detail.
+ */
+export const findBlockInTree = (blocks: BuilderBlock[] | undefined, id: string): BuilderBlock | null => {
+  if (!blocks) return null;
+  for (const block of blocks) {
+    if (block.id === id) return block;
+    if (block.children) {
+      const child = findBlockInTree(block.children, id);
+      if (child) return child;
+    }
+    if (block.component?.name === 'Columns' && block.component?.options?.columns) {
+      for (const column of block.component.options.columns) {
+        if (column.blocks) {
+          const child = findBlockInTree(column.blocks, id);
+          if (child) return child;
+        }
+      }
+    }
+  }
+  return null;
+}