@builder.io/sdk-react-native 0.0.1-44 → 0.0.1-50

package/src/blocks/video.lite.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
 
 export default function Video(props) {
   return (
@@ -7,8 +7,8 @@ export default function Video(props) {
       {...props.attributes}
       preload="none"
       style={{
-        width: '100%',
-        height: '100%',
+        width: "100%",
+        height: "100%",
         ...props.attributes?.style,
         objectFit: props.fit,
         objectPosition: props.position,
@@ -16,7 +16,7 @@ export default function Video(props) {
         // not have the video overflow
         borderRadius: 1,
       }}
-      key={props.video || 'no-src'}
+      key={props.video || "no-src"}
       poster={props.posterImage}
       autoPlay={props.autoPlay}
       muted={props.muted}

package/src/components/block-styles.js

@@ -1,5 +1,7 @@
-import * as React from 'react';
+import * as React from "react";
 function BlockStyles(props) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null);
 }
-export { BlockStyles as default };
+export {
+  BlockStyles as default
+};

package/src/components/block-styles.lite.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
 
 export default function BlockStyles(props) {
   return <></>;

package/src/components/error-boundary.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Text } from 'react-native';
+import React from "react";
+import { Text } from "react-native";
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -9,19 +9,17 @@ class ErrorBoundary extends React.Component {
     return { hasError: true };
   }
   componentDidCatch(error, errorInfo) {
-    console.error('Error rendering Builder.io block', error, errorInfo);
+    console.error("Error rendering Builder.io block", error, errorInfo);
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ React.createElement(
-        Text,
-        {
-          style: { color: 'gray' },
-        },
-        'Error rendering Builder.io block'
-      );
+      return /* @__PURE__ */ React.createElement(Text, {
+        style: { color: "gray" }
+      }, "Error rendering Builder.io block");
     }
     return this.props.children;
   }
 }
-export { ErrorBoundary as default };
+export {
+  ErrorBoundary as default
+};

package/src/components/error-boundary.lite.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
 
 export default function ErrorBoundary(props) {
   return <></>;

package/src/components/render-block.js

@@ -4,47 +4,39 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) =>
-  key in obj
-    ? __defProp(obj, key, {
-        enumerable: true,
-        configurable: true,
-        writable: true,
-        value,
-      })
-    : (obj[key] = value);
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from 'react';
-import { useContext } from 'react';
-import { getBlockComponentOptions } from '../functions/get-block-component-options';
-import { getBlockProperties } from '../functions/get-block-properties';
-import { getBlockStyles } from '../functions/get-block-styles';
-import { getBlockTag } from '../functions/get-block-tag';
-import { components } from '../functions/register-component';
-import BuilderContext from '../context/builder.context';
-import { getBlockActions } from '../functions/get-block-actions';
-import { getProcessedBlock } from '../functions/get-processed-block';
-import BlockStyles from './block-styles';
+import * as React from "react";
+import { useContext } from "react";
+import { getBlockComponentOptions } from "../functions/get-block-component-options";
+import { getBlockProperties } from "../functions/get-block-properties";
+import { getBlockStyles } from "../functions/get-block-styles";
+import { getBlockTag } from "../functions/get-block-tag";
+import { components } from "../functions/register-component";
+import BuilderContext from "../context/builder.context";
+import { getBlockActions } from "../functions/get-block-actions";
+import { getProcessedBlock } from "../functions/get-processed-block";
+import BlockStyles from "./block-styles";
 function RenderBlock(props) {
   var _a, _b, _c, _d;
   function component() {
     var _a2, _b2;
-    const componentName =
-      (_a2 = useBlock().component) == null ? void 0 : _a2.name;
+    const componentName = (_a2 = useBlock().component) == null ? void 0 : _a2.name;
     if (!componentName) {
       return null;
     }
-    const ref =
-      components[(_b2 = useBlock().component) == null ? void 0 : _b2.name];
+    const ref = components[(_b2 = useBlock().component) == null ? void 0 : _b2.name];
     if (componentName && !ref) {
       console.warn(`
         Could not find a registered component named "${componentName}". 
@@ -54,38 +46,28 @@ function RenderBlock(props) {
   }
   function componentInfo() {
     var _a2;
-    return (_a2 = component == null ? void 0 : component()) == null
-      ? void 0
-      : _a2.info;
+    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.info;
   }
   function componentRef() {
     var _a2;
-    return (_a2 = component == null ? void 0 : component()) == null
-      ? void 0
-      : _a2.component;
+    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component;
   }
   function tagName() {
     return getBlockTag(useBlock());
   }
-  function properties() {
-    return getBlockProperties(useBlock());
-  }
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
       state: builderContext.state,
-      context: builderContext.context,
+      context: builderContext.context
     });
   }
   function propertiesAndActions() {
-    return __spreadValues(__spreadValues({}, properties()), actions());
-  }
-  function actions() {
-    return getBlockActions({
+    return __spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
       block: useBlock(),
       state: builderContext.state,
-      context: builderContext.context,
-    });
+      context: builderContext.context
+    }));
   }
   function css() {
     return getBlockStyles(useBlock());
@@ -103,62 +85,24 @@ function RenderBlock(props) {
   const builderContext = useContext(BuilderContext);
   const ComponentRefRef = componentRef();
   const TagNameRef = tagName();
-  return /* @__PURE__ */ React.createElement(
-    React.Fragment,
-    null,
-    !((_a = componentInfo == null ? void 0 : componentInfo()) == null
-      ? void 0
-      : _a.noWrap)
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          /* @__PURE__ */ React.createElement(
-            TagNameRef,
-            __spreadProps(__spreadValues({}, propertiesAndActions()), {
-              style: css(),
-            }),
-            /* @__PURE__ */ React.createElement(BlockStyles, {
-              block: useBlock(),
-            }),
-            componentRef()
-              ? /* @__PURE__ */ React.createElement(
-                  ComponentRefRef,
-                  __spreadProps(__spreadValues({}, componentOptions()), {
-                    builderBlock: useBlock(),
-                  }),
-                  (_b = children()) == null
-                    ? void 0
-                    : _b.map((child) =>
-                        /* @__PURE__ */ React.createElement(RenderBlock, {
-                          block: child,
-                        })
-                      )
-                )
-              : null,
-            (_c = noCompRefChildren()) == null
-              ? void 0
-              : _c.map((child) =>
-                  /* @__PURE__ */ React.createElement(RenderBlock, {
-                    block: child,
-                  })
-                )
-          )
-        )
-      : /* @__PURE__ */ React.createElement(
-          ComponentRefRef,
-          __spreadProps(__spreadValues({}, componentOptions()), {
-            attributes: propertiesAndActions(),
-            builderBlock: useBlock(),
-            style: css(),
-          }),
-          (_d = children()) == null
-            ? void 0
-            : _d.map((child) =>
-                /* @__PURE__ */ React.createElement(RenderBlock, {
-                  block: child,
-                })
-              )
-        )
-  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !((_a = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a.noWrap) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
+    style: css()
+  }), /* @__PURE__ */ React.createElement(BlockStyles, {
+    block: useBlock()
+  }), componentRef() ? /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+    builderBlock: useBlock()
+  }), (_b = children()) == null ? void 0 : _b.map((child, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    block: child
+  }))) : null, (_c = noCompRefChildren()) == null ? void 0 : _c.map((child, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    block: child
+  })))) : /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+    attributes: propertiesAndActions(),
+    builderBlock: useBlock(),
+    style: css()
+  }), (_d = children()) == null ? void 0 : _d.map((child, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    block: child
+  }))));
 }
-export { RenderBlock as default };
+export {
+  RenderBlock as default
+};

package/src/components/render-block.lite.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { useContext } from 'react';
-import { getBlockComponentOptions } from '../functions/get-block-component-options';
-import { getBlockProperties } from '../functions/get-block-properties';
-import { getBlockStyles } from '../functions/get-block-styles';
-import { getBlockTag } from '../functions/get-block-tag';
-import { components } from '../functions/register-component';
-import BuilderContext from '../context/builder.context.lite';
-import { getBlockActions } from '../functions/get-block-actions';
-import { getProcessedBlock } from '../functions/get-processed-block';
-import BlockStyles from './block-styles.lite';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import { getBlockComponentOptions } from "../functions/get-block-component-options";
+import { getBlockProperties } from "../functions/get-block-properties";
+import { getBlockStyles } from "../functions/get-block-styles";
+import { getBlockTag } from "../functions/get-block-tag";
+import { components } from "../functions/register-component";
+import BuilderContext from "../context/builder.context.lite";
+import { getBlockActions } from "../functions/get-block-actions";
+import { getProcessedBlock } from "../functions/get-processed-block";
+import BlockStyles from "./block-styles.lite";
 
 export default function RenderBlock(props) {
   function component() {
@@ -43,10 +43,6 @@ export default function RenderBlock(props) {
     return getBlockTag(useBlock());
   }
 
-  function properties() {
-    return getBlockProperties(useBlock());
-  }
-
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
@@ -56,15 +52,14 @@ export default function RenderBlock(props) {
   }
 
   function propertiesAndActions() {
-    return { ...properties(), ...actions() };
-  }
-
-  function actions() {
-    return getBlockActions({
-      block: useBlock(),
-      state: builderContext.state,
-      context: builderContext.context,
-    });
+    return {
+      ...getBlockProperties(useBlock()),
+      ...getBlockActions({
+        block: useBlock(),
+        state: builderContext.state,
+        context: builderContext.context,
+      }),
+    };
   }
 
   function css() {
@@ -104,13 +99,13 @@ export default function RenderBlock(props) {
                 {...componentOptions()}
                 builderBlock={useBlock()}
               >
-                {children()?.map((child) => (
+                {children()?.map((child, index) => (
                   <RenderBlock block={child} />
                 ))}
               </ComponentRefRef>
             ) : null}
 
-            {noCompRefChildren()?.map((child) => (
+            {noCompRefChildren()?.map((child, index) => (
               <RenderBlock block={child} />
             ))}
           </TagNameRef>
@@ -122,7 +117,7 @@ export default function RenderBlock(props) {
           builderBlock={useBlock()}
           style={css()}
         >
-          {children()?.map((child) => (
+          {children()?.map((child, index) => (
             <RenderBlock block={child} />
           ))}
         </ComponentRefRef>

package/src/components/render-blocks.js

@@ -1,73 +1,54 @@
-import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { isEditing } from '../functions/is-editing';
-import RenderBlock from './render-block';
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import { isEditing } from "../functions/is-editing";
+import RenderBlock from "./render-block";
 function RenderBlocks(props) {
-  var _a, _b;
+  var _a;
+  function className() {
+    var _a2;
+    return "builder-blocks" + (!((_a2 = props.blocks) == null ? void 0 : _a2.length) ? " no-blocks" : "");
+  }
   function onClick() {
-    var _a2, _b2;
+    var _a2, _b;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b2 = window.parent) == null
-        ? void 0
-        : _b2.postMessage(
-            {
-              type: 'builder.clickEmptyBlocks',
-              data: {
-                parentElementId: props.parent,
-                dataPath: props.path,
-              },
-            },
-            '*'
-          );
+      (_b = window.parent) == null ? void 0 : _b.postMessage({
+        type: "builder.clickEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
     }
   }
   function onMouseEnter() {
-    var _a2, _b2;
+    var _a2, _b;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b2 = window.parent) == null
-        ? void 0
-        : _b2.postMessage(
-            {
-              type: 'builder.hoverEmptyBlocks',
-              data: {
-                parentElementId: props.parent,
-                dataPath: props.path,
-              },
-            },
-            '*'
-          );
+      (_b = window.parent) == null ? void 0 : _b.postMessage({
+        type: "builder.hoverEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path
+        }
+      }, "*");
     }
   }
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      'builder-path': props.path,
-      'builder-parent-id': props.parent,
-      onClick: (event) => onClick,
-      onMouseEnter: (event) => onMouseEnter,
-      className:
-        'builder-blocks' +
-        (!((_a = props.blocks) == null ? void 0 : _a.length)
-          ? ' no-blocks'
-          : ''),
-      style: styles.view1,
+  return /* @__PURE__ */ React.createElement(View, {
+    "builder-path": props.path,
+    "builder-parent-id": props.parent,
+    dataSet: {
+      class: className()
     },
-    props.blocks
-      ? /* @__PURE__ */ React.createElement(
-          React.Fragment,
-          null,
-          (_b = props.blocks) == null
-            ? void 0
-            : _b.map((block) =>
-                /* @__PURE__ */ React.createElement(RenderBlock, {
-                  block,
-                })
-              )
-        )
-      : null
-  );
+    onClick: (event) => onClick(),
+    onMouseEnter: (event) => onMouseEnter(),
+    style: styles.view1
+  }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: block.id,
+    block
+  }))) : null);
 }
 const styles = StyleSheet.create({
-  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" }
 });
-export { RenderBlocks as default };
+export {
+  RenderBlocks as default
+};

package/src/components/render-blocks.lite.tsx

@@ -1,20 +1,24 @@
-import * as React from 'react';
-import { View, StyleSheet, Image, Text } from 'react-native';
-import { isEditing } from '../functions/is-editing';
-import RenderBlock from './render-block.lite';
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { isEditing } from "../functions/is-editing";
+import RenderBlock from "./render-block.lite";
 
 export default function RenderBlocks(props) {
+  function className() {
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+  }
+
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
         {
-          type: 'builder.clickEmptyBlocks',
+          type: "builder.clickEmptyBlocks",
           data: {
             parentElementId: props.parent,
             dataPath: props.path,
           },
         },
-        '*'
+        "*"
       );
     }
   }
@@ -23,13 +27,13 @@ export default function RenderBlocks(props) {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
         {
-          type: 'builder.hoverEmptyBlocks',
+          type: "builder.hoverEmptyBlocks",
           data: {
             parentElementId: props.parent,
             dataPath: props.path,
           },
         },
-        '*'
+        "*"
       );
     }
   }
@@ -38,15 +42,17 @@ export default function RenderBlocks(props) {
     <View
       builder-path={props.path}
       builder-parent-id={props.parent}
-      onClick={(event) => onClick}
-      onMouseEnter={(event) => onMouseEnter}
-      className={'builder-blocks' + (!props.blocks?.length ? ' no-blocks' : '')}
+      dataSet={{
+        class: className(),
+      }}
+      onClick={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
       style={styles.view1}
     >
       {props.blocks ? (
         <>
-          {props.blocks?.map((block) => (
-            <RenderBlock block={block} />
+          {props.blocks?.map((block, index) => (
+            <RenderBlock key={block.id} block={block} />
           ))}
         </>
       ) : null}
@@ -55,5 +61,5 @@ export default function RenderBlocks(props) {
 }
 
 const styles = StyleSheet.create({
-  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
+  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
 });