@builder.io/sdk-react-native 4.2.0 → 4.2.2

package/src/blocks/tabs/tabs.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, StyleSheet, Pressable } from "react-native";
 import { useState } from "react";
 import Blocks from "../../components/blocks/blocks";
 import type { BuilderBlock } from "../../types/builder-block";
@@ -26,6 +14,10 @@ function Tabs(props: TabsProps) {
     return props.tabs && props.tabs[active].content;
   }
 
+  function getTabStyle(index: number) {
+    return index === activeTab ? props.activeTabStyle : {};
+  }
+
   function onClick(index: number) {
     if (index === activeTab && props.collapsible) {
       setActiveTab(-1);
@@ -47,9 +39,7 @@ function Tabs(props: TabsProps) {
         {props.tabs?.map((tab, index) => (
           <Pressable
             key={index}
-            style={{
-              ...(activeTab === index ? props.activeTabStyle : {}),
-            }}
+            style={getTabStyle(index)}
             onPress={(event) => onClick(index)}
           >
             <Blocks

package/src/components/awaiter.tsx

@@ -1,31 +1,7 @@
 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 { useEffect } from "react";
-
-/**
- * Placeholder component to be overridden by specific SDKs.
- * Allows to dynamically import components.
- */
-
-type AwaiterProps = {
-  load: () => Promise<any>;
-  props?: any;
-  attributes?: any;
-  fallback?: any;
-  children?: any;
-};
+import type { AwaiterProps } from "./awaiter.types";
 
 function Awaiter(props: AwaiterProps) {
   useEffect(() => {}, []);

package/src/components/awaiter.types.ts

@@ -0,0 +1,7 @@
+export type AwaiterProps = {
+  load: () => Promise<any>;
+  props?: any;
+  attributes?: any;
+  fallback?: any;
+  children?: any;
+}

package/src/components/block/block.tsx

@@ -1,18 +1,6 @@
 import BaseText from "../../blocks/BaseText";
 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";
 
 export type BlockProps = {
@@ -48,6 +36,7 @@ import type { ComponentProps } from "./components/component-ref/component-ref.he
 import ComponentRef from "./components/component-ref/component-ref";
 import RepeatedBlock from "./components/repeated-block";
 import { memo } from "react";
+import { View } from "react-native";
 
 function Block(props: BlockProps) {
   function repeatItem() {

package/src/components/block/components/block-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";
 
 export type BlockStylesProps = {
   block: BuilderBlock;

package/src/components/block/components/block-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 { Text } from "react-native";
 
 type BlockWrapperProps = {
   Wrapper: string;

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

@@ -1,18 +1,6 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
-import { useState, useContext, useEffect } from "react";
+import {} from "react-native";
+import { useState, useContext } from "react";
 import { wrapComponentRef } from "../../../content/wrap-component-ref";
 import Block from "../../block";
 import InteractiveElement from "../interactive-element";
@@ -27,8 +15,6 @@ function ComponentRef(props: ComponentProps) {
     props.isInteractive ? InteractiveElement : props.componentRef
   );
 
-  useEffect(() => {}, [props.componentOptions, props.blockChildren]);
-
   return (
     <BuilderContext.Provider
       value={{
@@ -55,15 +41,19 @@ function ComponentRef(props: ComponentProps) {
             contextValue: props.context,
           })}
         >
-          {props.blockChildren?.map((child) => (
-            <Block
-              key={child.id}
-              block={child}
-              context={props.context}
-              registeredComponents={props.registeredComponents}
-              linkComponent={props.linkComponent}
-            />
-          ))}
+          {props.componentRef ? (
+            <>
+              {props.blockChildren?.map((child) => (
+                <Block
+                  key={child.id}
+                  block={child}
+                  context={props.context}
+                  registeredComponents={props.registeredComponents}
+                  linkComponent={props.linkComponent}
+                />
+              ))}
+            </>
+          ) : null}
         </Wrapper>
       ) : null}
     </BuilderContext.Provider>

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 = {

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/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<
@@ -76,11 +64,16 @@ 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);
 
+  const [prevData, setPrevData] = useState(() => null);
+
+  const [prevLocale, setPrevLocale] = useState(() => "");
+
   function mergeNewRootState(newData: Dictionary<any>) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -236,11 +229,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 +482,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/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.2.0"
+export const SDK_VERSION = "4.2.2"

package/src/functions/register.ts

@@ -1,7 +1,24 @@
 import type { BuilderBlock } from '../types/builder-block';
 import type { DeepPartial } from '../types/deep-partial';
+import type { Input } from '../types/input';
 import { isBrowser } from './is-browser';
 import { serializeIncludingFunctions } from './register-component';
+export interface Action {
+  name: string;
+  inputs?: readonly Input[];
+  returnType?: Input;
+  action: (options: Record<string, any>) => string;
+  /**
+   * Is an action for expression (e.g. calculating a binding like a formula
+   * to fill a value based on locale) or a function (e.g. something to trigger
+   * on an event like add to cart) or either (e.g. a custom code block)
+   */
+  kind: 'expression' | 'function' | 'any';
+  /**
+   * Globally unique ID for an action, e.g. "@builder.io:setState"
+   */
+  id: string;
+}
 export interface InsertMenuItem {
   name: string;
   icon?: string;
@@ -45,4 +62,16 @@ export function register(type: string, info: any) {
       console.debug('Could not postmessage', err);
     }
   }
+}
+export function registerAction(action: Action) {
+  if (isBrowser()) {
+    const actionClone = JSON.parse(JSON.stringify(action));
+    if (action.action) {
+      actionClone.action = action.action.toString();
+    }
+    window.parent?.postMessage({
+      type: 'builder.registerAction',
+      data: actionClone
+    }, '*');
+  }
 }

package/src/server-index.ts

@@ -28,7 +28,7 @@ export type { ComponentInfo } from './types/components';
 export { isEditing } from './functions/is-editing';
 export { isPreviewing } from './functions/is-previewing';
 export { createRegisterComponentMessage } from './functions/register-component';
-export { register } from './functions/register';
+export { register, registerAction } from './functions/register';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
 export { setEditorSettings } from './functions/set-editor-settings';
 export type { Settings } from './functions/set-editor-settings';