@builder.io/sdk-react-native 2.0.31 → 3.0.1-1

package/src/components/blocks/blocks.tsx

@@ -1,61 +1,96 @@
-import * as React from "react";
+import React, {memo, useContext} from 'react';
 import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
-import { useContext } from "react";
+    FlatList
+  } from "react-native";
+
 import BuilderContext from "../../context/builder.context";
 import ComponentsContext from "../../context/components.context";
 import Block from "../block/block";
 import BlocksWrapper from "./blocks-wrapper";
 import type { BlocksProps } from "./blocks.types";
 
-function Blocks(props: BlocksProps) {
-  const builderContext = useContext(BuilderContext);
-
-  const componentsContext = useContext(ComponentsContext);
-
-  return (
-    <BlocksWrapper
-      blocks={props.blocks}
-      parent={props.parent}
-      path={props.path}
-      styleProp={props.styleProp}
-      classNameProp={props.className}
-      BlocksWrapper={
-        props.context?.BlocksWrapper || builderContext?.BlocksWrapper
-      }
-      BlocksWrapperProps={
-        props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps
-      }
-    >
-      {props.blocks ? (
-        <>
-          {props.blocks?.map((block) => (
-            <Block
-              key={block.id}
-              block={block}
-              linkComponent={props.linkComponent}
-              context={props.context || builderContext}
-              registeredComponents={
-                props.registeredComponents ||
-                componentsContext?.registeredComponents
-              }
-            />
-          ))}
-        </>
-      ) : null}
-    </BlocksWrapper>
-  );
-}
-
-export default Blocks;
+type RenderBlockProps = {
+    item: any;  // Replace 'any' with your block type
+    linkComponent?: React.ComponentType<any>;
+    context?: any;  // Replace with your context type
+    registeredComponents?: any;  // Replace with your components type
+  };
+  
+  // Moved outside and memoized
+  const RenderBlock = memo(({ 
+    item: block,
+    linkComponent,
+    context,
+    registeredComponents 
+  }: RenderBlockProps) => (
+    <Block
+      key={block.id}
+      block={block}
+      linkComponent={linkComponent}
+      context={context}
+      registeredComponents={registeredComponents}
+    />
+  ));
+  
+  // Optional: Give the component a display name for better debugging
+  RenderBlock.displayName = 'RenderBlock';
+  
+  function Blocks(props: BlocksProps) {
+    const builderContext = useContext(BuilderContext);
+    const componentsContext = useContext(ComponentsContext);
+  
+    // Memoize renderItem function to prevent unnecessary recreations
+    const renderItem = React.useCallback(({ item }: { item: any }) => (
+      <RenderBlock
+        item={item}
+        linkComponent={props.linkComponent}
+        context={props.context || builderContext}
+        registeredComponents={
+          props.registeredComponents || componentsContext?.registeredComponents
+        }
+      />
+    ), [
+      props.linkComponent,
+      props.context,
+      props.registeredComponents,
+      builderContext,
+      componentsContext?.registeredComponents
+    ]);
+  
+    // Memoize keyExtractor
+    const keyExtractor = React.useCallback((item: any) => 
+      item.id.toString()
+    , []);
+  
+    return (
+      <BlocksWrapper
+        blocks={props.blocks}
+        parent={props.parent}
+        path={props.path}
+        styleProp={props.styleProp}
+        classNameProp={props.className}
+        BlocksWrapper={
+          props.context?.BlocksWrapper || builderContext?.BlocksWrapper
+        }
+        BlocksWrapperProps={
+          props.context?.BlocksWrapperProps || builderContext?.BlocksWrapperProps
+        }
+      >
+        {props.blocks ? (
+          <FlatList 
+            data={props.blocks}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            // Optional: Add these props for better performance
+            removeClippedSubviews={true}
+            maxToRenderPerBatch={10}
+            windowSize={5}
+            initialNumToRender={5}
+          />
+        ) : null}
+      </BlocksWrapper>
+    );
+  }
+  
+  // Memoize the entire Blocks component
+  export default memo(Blocks);

package/src/components/content/components/enable-editor.helpers.ts

@@ -0,0 +1,18 @@
+import { TARGET } from '../../../constants/target';
+import { isEditing } from '../../../functions/is-editing';
+import { isPreviewing } from '../../../functions/is-previewing';
+import type { Target } from '../../../types/targets';
+
+/**
+ * SDKS that use the elementRef approach to enable visual editing.
+ * We don't need to render the div for other SDKs as they attach event listeners to the window.
+ */
+export const SDKS_USING_ELEMENT_REF_APPROACH = (['svelte', 'qwik', 'vue'] as Target[]);
+
+/**
+ * We need to attach this div only when content exists or isPreviewing/isEditing even when content is null,
+ * as we need to set the elementRef and allow previewing and visual editing
+ */
+export const needsElementRefDivForEditing = () => {
+  return SDKS_USING_ELEMENT_REF_APPROACH.includes(TARGET) && (isEditing() || isPreviewing());
+}

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

@@ -55,6 +55,7 @@ import type {
   BuilderComponentStateChange,
   ContentProps,
 } from "../content.types";
+import { needsElementRefDivForEditing } from "./enable-editor.helpers";
 import { getWrapperClassName } from "./styles.helpers";
 
 function EnableEditor(props: BuilderEditorProps) {
@@ -249,8 +250,14 @@ function EnableEditor(props: BuilderEditorProps) {
     Object.values<ComponentInfo>(
       props.builderContextSignal.componentInfos
     ).forEach((registeredComponent) => {
-      const message = createRegisterComponentMessage(registeredComponent);
-      window.parent?.postMessage(message, "*");
+      if (
+        !props.model ||
+        !registeredComponent.models?.length ||
+        registeredComponent.models.includes(props.model)
+      ) {
+        const message = createRegisterComponentMessage(registeredComponent);
+        window.parent?.postMessage(message, "*");
+      }
     });
     window.addEventListener(
       "builder:component:stateChangeListenerActivated",
@@ -323,8 +330,14 @@ function EnableEditor(props: BuilderEditorProps) {
         Object.values<ComponentInfo>(
           props.builderContextSignal.componentInfos
         ).forEach((registeredComponent) => {
-          const message = createRegisterComponentMessage(registeredComponent);
-          window.parent?.postMessage(message, "*");
+          if (
+            !props.model ||
+            !registeredComponent.models?.length ||
+            registeredComponent.models.includes(props.model)
+          ) {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
         });
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
@@ -422,13 +435,20 @@ function EnableEditor(props: BuilderEditorProps) {
 
   return (
     <builderContext.Provider value={props.builderContextSignal}>
-      {props.builderContextSignal.content ? (
+      {props.builderContextSignal.content || needsElementRefDivForEditing() ? (
         <ContentWrapper
           {...{}}
           ref={elementRef}
           onClick={(event) => onClick(event)}
           builder-content-id={props.builderContextSignal.content?.id}
           builder-model={props.model}
+          style={{
+            display:
+              !props.builderContextSignal.content &&
+              needsElementRefDivForEditing()
+                ? "none"
+                : undefined,
+          }}
           {...{
             // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
             dataSet: {

package/src/components/content/content.tsx

@@ -59,11 +59,7 @@ function ContentComponent(props: ContentProps) {
   const [registeredComponents, setRegisteredComponents] = useState(() =>
     [
       ...getDefaultRegisteredComponents(),
-      ...(props.customComponents?.filter(({ models }) => {
-        if (!models?.length) return true;
-        if (!props.model) return true;
-        return models.includes(props.model);
-      }) || []),
+      ...(props.customComponents || []),
     ].reduce<RegisteredComponents>(
       (acc, { component, ...info }) => ({
         ...acc,
@@ -96,11 +92,7 @@ function ContentComponent(props: ContentProps) {
       apiVersion: props.apiVersion,
       componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(props.customComponents?.filter(({ models }) => {
-          if (!models?.length) return true;
-          if (!props.model) return true;
-          return models.includes(props.model);
-        }) || []),
+        ...(props.customComponents || []),
       ].reduce<Dictionary<ComponentInfo>>(
         (acc, { component: _, ...info }) => ({
           ...acc,
@@ -112,6 +104,7 @@ function ContentComponent(props: ContentProps) {
       BlocksWrapper: props.blocksWrapper || ScrollView,
       BlocksWrapperProps: props.blocksWrapperProps || {},
       nonce: props.nonce || "",
+      model: props.model || "",
     }));
 
   const hasInitialized = useRef(false);

package/src/constants/file-types.ts

@@ -0,0 +1,2 @@
+export const IMAGE_FILE_TYPES = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'gif', 'jfif', 'pjpeg', 'pjp', 'apng', 'avif', 'tif', 'tiff', 'heif', 'bmp', 'eps', 'raw', 'cr2', 'nef', 'orf', 'sr2', 'psd', 'heic', 'dib', 'ai'];
+export const VIDEO_FILE_TYPES = ['mp4', 'webm', 'mkv', 'flv', 'vob', 'ogv', 'ogg', 'drc', 'gif', 'gifv', 'mng', 'avi', 'mov', 'qt', 'mts', 'm2ts', 'ts', 'wmv', 'yuv', 'rm', 'rmvb', 'viv', 'asf', 'amv', 'm4p', 'mpeg', 'mpe', 'm2v', 'm4v', 'svi', '3gp', '3g2', 'mxf', 'roq', 'nsv', 'f4v', 'f4p', 'f4a', 'f4b']

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.31"
+export const SDK_VERSION = "3.0.1"

package/src/context/builder.context.ts

@@ -13,4 +13,5 @@ export default createContext<any>({
   BlocksWrapper: "div",
   BlocksWrapperProps: {},
   nonce: "",
+  model: "",
 });

package/src/context/types.ts

@@ -37,5 +37,6 @@ export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'Block
   // Used to recursively store all CSS coming from a parent that would apply to a Text block
   inheritedStyles: Record<string, unknown>;
   nonce: string;
+  model: string;
   canTrack?: boolean;
 }

package/src/functions/extract-localized-values.ts

@@ -0,0 +1,38 @@
+import type { BuilderBlock } from '../types/builder-block';
+import { traverse } from './traverse';
+function isLocalizedField(value: any) {
+  return value && typeof value === 'object' && value['@type'] === '@builder.io/core:LocalizedValue';
+}
+function containsLocalizedValues(data: Record<string, any>) {
+  if (!data || !Object.getOwnPropertyNames(data).length) {
+    return false;
+  }
+  let hasLocalizedValues = false;
+  traverse(data, value => {
+    if (isLocalizedField(value)) {
+      hasLocalizedValues = true;
+      return;
+    }
+  });
+  return hasLocalizedValues;
+}
+function extractLocalizedValues(data: Record<string, any>, locale: string) {
+  if (!data || !Object.getOwnPropertyNames(data).length) {
+    return {};
+  }
+  traverse(data, (value, update) => {
+    if (isLocalizedField(value)) {
+      update(value[locale] ?? undefined);
+    }
+  });
+  return data;
+}
+export function resolveLocalizedValues(block: BuilderBlock, locale: string | undefined) {
+  if (block.component?.options && containsLocalizedValues(block.component?.options)) {
+    if (!locale) {
+      console.warn('[Builder.io] In order to use localized fields in Builder, you must pass a locale prop to the BuilderComponent or to options object while fetching the content to resolve localized fields. Learn more: https://www.builder.io/c/docs/localization-inline#targeting-and-inline-localization');
+    }
+    block.component.options = extractLocalizedValues(block.component.options, locale ?? 'Default');
+  }
+  return block;
+}

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

@@ -88,20 +88,15 @@ export const _processContentResult = async (options: GetContentOptions, content:
  * Returns a paginated array of entries that match the given options.
  */
 export async function fetchEntries(options: GetContentOptions) {
-  try {
-    const url = generateContentUrl(options);
-    const content = await _fetchContent(options);
-    if (!checkContentHasResults(content)) {
-      logger.error('Error fetching data. ', {
-        url,
-        content,
-        options
-      });
-      return null;
-    }
-    return _processContentResult(options, content);
-  } catch (error) {
-    logger.error('Error fetching data. ', error);
-    return null;
+  const url = generateContentUrl(options);
+  const content = await _fetchContent(options);
+  if (!checkContentHasResults(content)) {
+    logger.error('Error fetching data. ', {
+      url,
+      content,
+      options
+    });
+    throw content;
   }
+  return _processContentResult(options, content);
 }

package/src/functions/get-processed-block.ts

@@ -3,6 +3,7 @@ import type { BuilderContextInterface } from '../context/types';
 import { omit } from '../helpers/omit';
 import type { BuilderBlock } from '../types/builder-block';
 import { evaluate } from './evaluate/index';
+import { resolveLocalizedValues } from './extract-localized-values';
 import { fastClone } from './fast-clone';
 import { set } from './set';
 import { transformBlock } from './transform-block';
@@ -96,7 +97,8 @@ export function getProcessedBlock({
    */
   shouldEvaluateBindings: boolean;
 } & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock {
-  const transformedBlock = transformBlock(block);
+  let transformedBlock = resolveLocalizedValues(block, (rootState.locale as string | undefined));
+  transformedBlock = transformBlock(transformedBlock);
   if (shouldEvaluateBindings) {
     return evaluateBindings({
       block: transformedBlock,

package/src/functions/register-component.ts

@@ -13,8 +13,11 @@ const serializeFn = (fnValue: Function) => {
   // 2. `name(args) => {code}`
   // 3. `(args) => {}`
   // 4. `args => {}`
+  // 5. `async function(args) {code}`
+  // 6. `async (args) => {}`
+  // 7. `async args => {}`
   const isArrowWithoutParens = /^[a-zA-Z0-9_]+\s*=>/i.test(fnStr);
-  const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(') && !isArrowWithoutParens;
+  const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('async') && !fnStr.startsWith('(') && !isArrowWithoutParens;
   return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
 export function serializeIncludingFunctions(info: ComponentInfo) {

package/src/functions/traverse.ts

@@ -0,0 +1,64 @@
+type TraverseCallback = (value: any, update: (newValue: any) => void) => void;
+
+/**
+ * Recursively traverses an object or array, invoking a callback on each value.
+ *
+ * @param {any} obj - The object or array to traverse. Can also handle primitives, null, or undefined.
+ * @param {TraverseCallback} callback - The function to invoke on each value. Receives the current value
+ * and an `update` function to modify the value in its parent container.
+ * @param {any} [parent=null] - The parent object or array of the current value. Used internally.
+ * @param {any} [key=null] - The key or index of the current value in its parent. Used internally.
+ * @param {WeakSet} [visited=new WeakSet()] - Tracks visited objects to handle circular references. Used internally.
+ *
+ * @example
+ * // Example: Doubling all numbers in an object
+ * const obj = { a: 1, b: [2, 3, { c: 4 }] };
+ * traverse(obj, (value, update) => {
+ *   if (typeof value === 'number') {
+ *     update(value * 2);
+ *   }
+ * });
+ * console.log(obj); // { a: 2, b: [4, 6, { c: 8 }] }
+ *
+ * @example
+ * // Example: Handling circular references
+ * const obj = { a: 1 };
+ * obj.self = obj;
+ * traverse(obj, (value, update) => {
+ *   if (typeof value === 'number') {
+ *     update(value * 2);
+ *   }
+ * });
+ * console.log(obj.a); // 2
+ */
+export function traverse(obj: any, callback: TraverseCallback, parent: any = null, key: any = null, visited = new WeakSet()): void {
+  if (obj == null || typeof obj !== 'object') {
+    callback(obj, (newValue: any) => {
+      if (parent !== null && key !== null) {
+        parent[key] = newValue;
+      }
+    });
+    return;
+  }
+  if (visited.has(obj)) {
+    return;
+  }
+  visited.add(obj);
+  if (Array.isArray(obj)) {
+    obj.forEach((item, index) => {
+      const update = (newValue: any) => {
+        obj[index] = newValue;
+      };
+      callback(item, update);
+      traverse(item, callback, obj, index, visited);
+    });
+  } else {
+    Object.entries(obj).forEach(([key, value]) => {
+      const update = (newValue: any) => {
+        obj[key] = newValue;
+      };
+      callback(value, update);
+      traverse(value, callback, obj, key, visited);
+    });
+  }
+}

package/src/types/components.ts

@@ -161,5 +161,8 @@ export interface ComponentInfo {
      */
     builderLinkComponent?: boolean;
   };
+  meta?: {
+    [key: string]: any;
+  };
 }
 type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create'