@builder.io/sdk-react-native 0.0.1-4 → 0.0.1-49

package/src/components/render-block.js

@@ -4,81 +4,161 @@ 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 * 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;
+  var _a, _b, _c, _d;
   function component() {
-    var _a2;
-    return components[(_a2 = block().component) == null ? void 0 : _a2.name];
+    var _a2, _b2;
+    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];
+    if (componentName && !ref) {
+      console.warn(`
+        Could not find a registered component named "${componentName}". 
+        If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    }
+    return ref;
   }
   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(block());
+    return getBlockTag(useBlock());
   }
   function properties() {
-    return getBlockProperties(block());
+    return getBlockProperties(useBlock());
   }
-  function block() {
+  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({
-      block: block(),
+      block: useBlock(),
       state: builderContext.state,
-      context: builderContext.context
+      context: builderContext.context,
     });
   }
   function css() {
-    return getBlockStyles(block());
+    return getBlockStyles(useBlock());
   }
   function componentOptions() {
-    return getBlockComponentOptions(block());
+    return getBlockComponentOptions(useBlock());
+  }
+  function children() {
+    var _a2;
+    return (_a2 = useBlock().children) != null ? _a2 : [];
+  }
+  function noCompRefChildren() {
+    return componentRef() ? [] : children();
   }
   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(ComponentRefRef, __spreadProps(__spreadValues({}, (_b = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _b.options), {
-    attributes: properties(),
-    style: css()
-  }))), !((_c = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _c.noWrap) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, properties()), {
-    style: css()
-  }), componentRef() && /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, componentOptions())), !componentRef() && block().children && block().children.length && /* @__PURE__ */ React.createElement(React.Fragment, null, block().children.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) =>
+                        /* @__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,
+                })
+              )
+        )
+  );
 }
-export {
-  RenderBlock as default
-};
+export { RenderBlock as default };

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

@@ -1,18 +1,34 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, 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 * 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() {
-    return components[block().component?.name];
+    const componentName = useBlock().component?.name;
+
+    if (!componentName) {
+      return null;
+    }
+
+    const ref = components[useBlock().component?.name];
+
+    if (componentName && !ref) {
+      // TODO: Public doc page with more info about this message
+      console.warn(`
+        Could not find a registered component named "${componentName}". 
+        If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    }
+
+    return ref;
   }
 
   function componentInfo() {
@@ -24,14 +40,14 @@ export default function RenderBlock(props) {
   }
 
   function tagName() {
-    return getBlockTag(block());
+    return getBlockTag(useBlock());
   }
 
   function properties() {
-    return getBlockProperties(block());
+    return getBlockProperties(useBlock());
   }
 
-  function block() {
+  function useBlock() {
     return getProcessedBlock({
       block: props.block,
       state: builderContext.state,
@@ -39,20 +55,36 @@ export default function RenderBlock(props) {
     });
   }
 
+  function propertiesAndActions() {
+    return { ...properties(), ...actions() };
+  }
+
   function actions() {
     return getBlockActions({
-      block: block(),
+      block: useBlock(),
       state: builderContext.state,
       context: builderContext.context,
     });
   }
 
   function css() {
-    return getBlockStyles(block());
+    return getBlockStyles(useBlock());
   }
 
   function componentOptions() {
-    return getBlockComponentOptions(block());
+    return getBlockComponentOptions(useBlock());
+  }
+
+  function children() {
+    // TO-DO: When should `canHaveChildren` dictate rendering?
+    // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+    // but still receive and need to render children.
+    // return componentInfo?.()?.canHaveChildren ? useBlock().children : [];
+    return useBlock().children ?? [];
+  }
+
+  function noCompRefChildren() {
+    return componentRef() ? [] : children();
   }
 
   const builderContext = useContext(BuilderContext);
@@ -62,30 +94,38 @@ export default function RenderBlock(props) {
 
   return (
     <>
-      {componentInfo?.()?.noWrap && (
+      {!componentInfo?.()?.noWrap ? (
         <>
-          <ComponentRefRef
-            {...componentInfo?.()?.options}
-            attributes={properties()}
-            style={css()}
-          />
-        </>
-      )}
+          <TagNameRef {...propertiesAndActions()} style={css()}>
+            <BlockStyles block={useBlock()} />
 
-      {!componentInfo?.()?.noWrap && (
-        <>
-          <TagNameRef {...properties()} style={css()}>
-            {componentRef() && <ComponentRefRef {...componentOptions()} />}
-
-            {!componentRef() && block().children && block().children.length && (
-              <>
-                {block().children.map((child) => (
+            {componentRef() ? (
+              <ComponentRefRef
+                {...componentOptions()}
+                builderBlock={useBlock()}
+              >
+                {children()?.map((child) => (
                   <RenderBlock block={child} />
                 ))}
-              </>
-            )}
+              </ComponentRefRef>
+            ) : null}
+
+            {noCompRefChildren()?.map((child) => (
+              <RenderBlock block={child} />
+            ))}
           </TagNameRef>
         </>
+      ) : (
+        <ComponentRefRef
+          {...componentOptions()}
+          attributes={propertiesAndActions()}
+          builderBlock={useBlock()}
+          style={css()}
+        >
+          {children()?.map((child) => (
+            <RenderBlock block={child} />
+          ))}
+        </ComponentRefRef>
       )}
     </>
   );

package/src/components/render-blocks.js

@@ -1,47 +1,80 @@
-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;
+  function className() {
+    var _a2;
+    return (
+      'builder-blocks' +
+      (!((_a2 = props.blocks) == null ? void 0 : _a2.length)
+        ? ' no-blocks'
+        : '')
+    );
+  }
   function onClick() {
     var _a2, _b;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null ? void 0 : _b.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, _b;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null ? void 0 : _b.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, {
-    className: "builder-blocks" + (!((_a = props.blocks) == null ? void 0 : _a.length) ? " no-blocks" : ""),
-    "builder-path": props.path,
-    "builder-parent-id": props.parent,
-    onClick: (event) => onClick,
-    onMouseEnter: (event) => onMouseEnter,
-    style: styles.view1
-  }, props.blocks.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    block
-  })));
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      'builder-path': props.path,
+      'builder-parent-id': props.parent,
+      dataSet: {
+        class: className(),
+      },
+      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) =>
+                /* @__PURE__ */ React.createElement(RenderBlock, {
+                  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,21 +1,24 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext } from "react";
-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,
           },
         },
-        "*"
+        '*'
       );
     }
   }
@@ -24,33 +27,39 @@ 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,
           },
         },
-        "*"
+        '*'
       );
     }
   }
 
   return (
     <View
-      className={"builder-blocks" + (!props.blocks?.length ? " no-blocks" : "")}
       builder-path={props.path}
       builder-parent-id={props.parent}
-      onClick={(event) => onClick}
-      onMouseEnter={(event) => onMouseEnter}
+      dataSet={{
+        class: className(),
+      }}
+      onClick={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
       style={styles.view1}
     >
-      {props.blocks.map((block) => (
-        <RenderBlock block={block} />
-      ))}
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <RenderBlock block={block} />
+          ))}
+        </>
+      ) : null}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+  view1: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' },
 });