@builder.io/sdk-react-native 0.4.4 → 0.5.0

package/src/blocks/video/component-info.js

@@ -6,100 +6,78 @@ const componentInfo = {
     minWidth: "20px"
   },
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
-  inputs: [
-    {
-      name: "video",
-      type: "file",
-      allowedFileTypes: ["mp4"],
-      bubble: true,
-      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
-      required: true
-    },
-    {
-      name: "posterImage",
-      type: "file",
-      allowedFileTypes: ["jpeg", "png"],
-      helperText: "Image to show before the video plays"
-    },
-    {
-      name: "autoPlay",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "controls",
-      type: "boolean",
-      defaultValue: false
-    },
-    {
-      name: "muted",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "loop",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "playsInline",
-      type: "boolean",
-      defaultValue: true
-    },
-    {
-      name: "fit",
-      type: "text",
-      defaultValue: "cover",
-      enum: ["contain", "cover", "fill", "auto"]
-    },
-    {
-      name: "fitContent",
-      type: "boolean",
-      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "position",
-      type: "text",
-      defaultValue: "center",
-      enum: [
-        "center",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "top left",
-        "top right",
-        "bottom left",
-        "bottom right"
-      ]
-    },
-    {
-      name: "height",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "width",
-      type: "number",
-      advanced: true
-    },
-    {
-      name: "aspectRatio",
-      type: "number",
-      advanced: true,
-      defaultValue: 0.7004048582995948
-    },
-    {
-      name: "lazyLoad",
-      type: "boolean",
-      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-      defaultValue: true,
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
+  inputs: [{
+    name: "video",
+    type: "file",
+    allowedFileTypes: ["mp4"],
+    bubble: true,
+    defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+    required: true
+  }, {
+    name: "posterImage",
+    type: "file",
+    allowedFileTypes: ["jpeg", "png"],
+    helperText: "Image to show before the video plays"
+  }, {
+    name: "autoPlay",
+    type: "boolean",
+    defaultValue: true
+  }, {
+    name: "controls",
+    type: "boolean",
+    defaultValue: false
+  }, {
+    name: "muted",
+    type: "boolean",
+    defaultValue: true
+  }, {
+    name: "loop",
+    type: "boolean",
+    defaultValue: true
+  }, {
+    name: "playsInline",
+    type: "boolean",
+    defaultValue: true
+  }, {
+    name: "fit",
+    type: "text",
+    defaultValue: "cover",
+    enum: ["contain", "cover", "fill", "auto"]
+  }, {
+    name: "preload",
+    type: "text",
+    defaultValue: "metadata",
+    enum: ["auto", "metadata", "none"]
+  }, {
+    name: "fitContent",
+    type: "boolean",
+    helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+    defaultValue: true,
+    advanced: true
+  }, {
+    name: "position",
+    type: "text",
+    defaultValue: "center",
+    enum: ["center", "top", "left", "right", "bottom", "top left", "top right", "bottom left", "bottom right"]
+  }, {
+    name: "height",
+    type: "number",
+    advanced: true
+  }, {
+    name: "width",
+    type: "number",
+    advanced: true
+  }, {
+    name: "aspectRatio",
+    type: "number",
+    advanced: true,
+    defaultValue: 0.7004048582995948
+  }, {
+    name: "lazyLoad",
+    type: "boolean",
+    helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+    defaultValue: true,
+    advanced: true
+  }]
 };
+export { componentInfo }

package/src/components/{render-block/render-block.helpers.js → block/block.helpers.js}

@@ -4,56 +4,38 @@ 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 (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
+  for (var prop in b || (b = {})) 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]);
+  }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
+  for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
+  }
   return target;
 };
 import { evaluate } from "../../functions/evaluate";
-import { getProcessedBlock } from "../../functions/get-processed-block";
-const EMPTY_HTML_ELEMENTS = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "keygen",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
-const isEmptyHtmlElement = (tagName) => {
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+const EMPTY_HTML_ELEMENTS = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
+const isEmptyHtmlElement = tagName => {
   return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
 };
 const getComponent = ({
   block,
-  context
+  context,
+  registeredComponents
 }) => {
   var _a;
   const componentName = (_a = getProcessedBlock({
@@ -67,7 +49,7 @@ const getComponent = ({
   if (!componentName) {
     return null;
   }
-  const ref = context.registeredComponents[componentName];
+  const ref = registeredComponents[componentName];
   if (!ref) {
     console.warn(`
       Could not find a registered component named "${componentName}". 
@@ -81,7 +63,11 @@ const getRepeatItemData = ({
   block,
   context
 }) => {
-  const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
+  const _a = block,
+    {
+      repeat
+    } = _a,
+    blockWithoutRepeat = __objRest(_a, ["repeat"]);
   if (!(repeat == null ? void 0 : repeat.collection)) {
     return void 0;
   }
@@ -110,8 +96,4 @@ const getRepeatItemData = ({
   }));
   return repeatArray;
 };
-export {
-  getComponent,
-  getRepeatItemData,
-  isEmptyHtmlElement
-};
+export { getComponent, getRepeatItemData, isEmptyHtmlElement }

package/src/components/{render-block/render-block.jsx → block/block.jsx}

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -9,29 +9,28 @@ import {
   Text,
 } from "react-native";
 import { useState } from "react";
-import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles";
+import BlockStyles from "./components/block-styles";
 import {
   getComponent,
   getRepeatItemData,
   isEmptyHtmlElement,
-} from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block";
-import { TARGET } from "../../constants/target.js";
+} from "./block.helpers.js";
+import RepeatedBlock from "./components/repeated-block";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+import ComponentRef from "./components/component-ref/component-ref";
+import BlockWrapper from "./components/block-wrapper";
 
-function RenderBlock(props) {
-  const [component, setComponent] = useState(() =>
-    getComponent({
+function Block(props) {
+  function blockComponent() {
+    return getComponent({
       block: props.block,
       context: props.context,
-    })
-  );
+      registeredComponents: props.registeredComponents,
+    });
+  }
 
   function repeatItem() {
     return getRepeatItemData({
@@ -40,7 +39,7 @@ function RenderBlock(props) {
     });
   }
 
-  function useBlock() {
+  function processedBlock() {
     return repeatItem()
       ? props.block
       : getProcessedBlock({
@@ -53,44 +52,20 @@ function RenderBlock(props) {
         });
   }
 
-  const [Tag, setTag] = useState(() => props.block.tagName || "div");
+  function Tag() {
+    return props.block.tagName || "div";
+  }
 
   function canShowBlock() {
-    if ("hide" in useBlock()) {
-      return !useBlock().hide;
+    if ("hide" in processedBlock()) {
+      return !processedBlock().hide;
     }
-    if ("show" in useBlock()) {
-      return useBlock().show;
+    if ("show" in processedBlock()) {
+      return processedBlock().show;
     }
     return true;
   }
 
-  function actions() {
-    return getBlockActions({
-      block: useBlock(),
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      localState: props.context.localState,
-      context: props.context.context,
-    });
-  }
-
-  function attributes() {
-    const blockProperties = getBlockProperties(useBlock());
-    return {
-      ...blockProperties,
-      ...(TARGET === "reactNative"
-        ? {
-            style: getReactNativeBlockStyles({
-              block: useBlock(),
-              context: props.context,
-              blockStyles: blockProperties.style,
-            }),
-          }
-        : {}),
-    };
-  }
-
   function childrenWithoutParentComponent() {
     /**
      * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
@@ -99,30 +74,31 @@ function RenderBlock(props) {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component?.component && !repeatItem();
-    return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
+      !blockComponent?.()?.component && !repeatItem();
+    return shouldRenderChildrenOutsideRef
+      ? processedBlock().children ?? []
+      : [];
   }
 
-  function renderComponentProps() {
+  function componentRefProps() {
     return {
-      blockChildren: useBlock().children ?? [],
-      componentRef: component?.component,
+      blockChildren: processedBlock().children ?? [],
+      componentRef: blockComponent?.()?.component,
       componentOptions: {
-        ...getBlockComponentOptions(useBlock()),
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(!component?.noWrap
-          ? {}
-          : {
-              attributes: {
-                ...attributes(),
-                ...actions(),
-              },
-            }),
+        ...getBlockComponentOptions(processedBlock()),
+        builderContext: props.context,
+        ...(blockComponent?.()?.name === "Symbol" ||
+        blockComponent?.()?.name === "Columns"
+          ? {
+              builderComponents: props.registeredComponents,
+            }
+          : {}),
       },
       context: childrenContext,
+      registeredComponents: props.registeredComponents,
+      builderBlock: processedBlock(),
+      includeBlockProps: blockComponent?.()?.noWrap === true,
+      isInteractive: !blockComponent?.()?.isRSC,
     };
   }
 
@@ -134,13 +110,12 @@ function RenderBlock(props) {
     rootSetState: props.context.rootSetState,
     content: props.context.content,
     context: props.context.context,
-    registeredComponents: props.context.registeredComponents,
+    componentInfos: props.context.componentInfos,
     inheritedStyles: extractTextStyles(
-      getReactNativeBlockStyles({
-        block: useBlock(),
+      getBlockProperties({
+        block: processedBlock(),
         context: props.context,
-        blockStyles: attributes().style,
-      })
+      }).style || {}
     ),
   }));
 
@@ -148,34 +123,46 @@ function RenderBlock(props) {
     <>
       {canShowBlock() ? (
         <>
-          {!component?.noWrap ? (
+          {!blockComponent?.()?.noWrap ? (
             <>
-              {isEmptyHtmlElement(Tag) ? (
+              {isEmptyHtmlElement(Tag()) ? (
                 <>
-                  <Tag {...attributes()} {...actions()} />
+                  <BlockWrapper
+                    Wrapper={Tag()}
+                    block={processedBlock()}
+                    context={props.context}
+                    hasChildren={false}
+                  />
                 </>
               ) : null}
-              {!isEmptyHtmlElement(Tag) && repeatItem() ? (
+              {!isEmptyHtmlElement(Tag()) && repeatItem() ? (
                 <>
                   {repeatItem()?.map((data, index) => (
-                    <RenderRepeatedBlock
+                    <RepeatedBlock
                       key={index}
                       repeatContext={data.context}
                       block={data.block}
+                      registeredComponents={props.registeredComponents}
                     />
                   ))}
                 </>
               ) : null}
-              {!isEmptyHtmlElement(Tag) && !repeatItem() ? (
+              {!isEmptyHtmlElement(Tag()) && !repeatItem() ? (
                 <>
-                  <Tag {...attributes()} {...actions()}>
-                    <RenderComponent {...renderComponentProps()} />
+                  <BlockWrapper
+                    Wrapper={Tag()}
+                    block={processedBlock()}
+                    context={props.context}
+                    hasChildren={true}
+                  >
+                    <ComponentRef {...componentRefProps()} />
 
                     {childrenWithoutParentComponent()?.map((child) => (
-                      <RenderBlock
-                        key={"render-block-" + child.id}
+                      <Block
+                        key={"block-" + child.id}
                         block={child}
                         context={childrenContext}
+                        registeredComponents={props.registeredComponents}
                       />
                     ))}
 
@@ -186,13 +173,13 @@ function RenderBlock(props) {
                         context={childrenContext}
                       />
                     ))}
-                  </Tag>
+                  </BlockWrapper>
                 </>
               ) : null}
             </>
           ) : (
             <>
-              <RenderComponent {...renderComponentProps()} />
+              <ComponentRef {...componentRefProps()} />
             </>
           )}
         </>
@@ -201,4 +188,4 @@ function RenderBlock(props) {
   );
 }
 
-export default RenderBlock;
+export default Block;

package/src/components/{render-block → block/components}/block-styles.jsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 import {
   FlatList,
@@ -8,41 +8,42 @@ import {
   Image,
   Text,
 } from "react-native";
+import { useState } from "react";
 import {
   getMaxWidthQueryForSize,
   getSizesForBreakpoints,
-} from "../../constants/device-sizes.js";
-import { TARGET } from "../../constants/target.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { createCssClass } from "../../helpers/css.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
-import RenderInlinedStyles from "../render-inlined-styles";
+} from "../../../constants/device-sizes.js";
+import { TARGET } from "../../../constants/target.js";
+import { getProcessedBlock } from "../../../functions/get-processed-block.js";
+import { createCssClass } from "../../../helpers/css.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import InlinedStyles from "../../inlined-styles";
 
 function BlockStyles(props) {
-  function useBlock() {
-    return getProcessedBlock({
+  const [processedBlock, setProcessedBlock] = useState(() =>
+    getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
       rootState: props.context.rootState,
       rootSetState: props.context.rootSetState,
       context: props.context.context,
       shouldEvaluateBindings: true,
-    });
-  }
+    })
+  );
 
   function canShowBlock() {
     // only render styles for blocks that are visible
-    if (checkIsDefined(useBlock().hide)) {
-      return !useBlock().hide;
+    if (checkIsDefined(processedBlock.hide)) {
+      return !processedBlock.hide;
     }
-    if (checkIsDefined(useBlock().show)) {
-      return useBlock().show;
+    if (checkIsDefined(processedBlock.show)) {
+      return processedBlock.show;
     }
     return true;
   }
 
   function css() {
-    const styles = useBlock().responsiveStyles;
+    const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
       content?.meta?.breakpoints || {}
@@ -50,7 +51,7 @@ function BlockStyles(props) {
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
-    const className = useBlock().id;
+    const className = processedBlock.id;
     if (!className) {
       return "";
     }
@@ -87,7 +88,7 @@ function BlockStyles(props) {
     <>
       {TARGET !== "reactNative" && css() && canShowBlock() ? (
         <>
-          <RenderInlinedStyles styles={css()} />
+          <InlinedStyles styles={css()} />
         </>
       ) : null}
     </>

package/src/components/block/components/block-wrapper.jsx

@@ -0,0 +1,58 @@
+"use client";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
+import { getBlockActions } from "../../../functions/get-block-actions.js";
+import { getBlockProperties } from "../../../functions/get-block-properties.js";
+
+function BlockWrapper(props) {
+  return (
+    <>
+      {props.hasChildren ? (
+        <>
+          <props.Wrapper
+            {...getBlockProperties({
+              block: props.block,
+              context: props.context,
+            })}
+            {...getBlockActions({
+              block: props.block,
+              rootState: props.context.rootState,
+              rootSetState: props.context.rootSetState,
+              localState: props.context.localState,
+              context: props.context.context,
+              stripPrefix: true,
+            })}
+          >
+            {props.children}
+          </props.Wrapper>
+        </>
+      ) : (
+        <>
+          <props.Wrapper
+            {...getBlockProperties({
+              block: props.block,
+              context: props.context,
+            })}
+            {...getBlockActions({
+              block: props.block,
+              rootState: props.context.rootState,
+              rootSetState: props.context.rootSetState,
+              localState: props.context.localState,
+              context: props.context.context,
+              stripPrefix: true,
+            })}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export default BlockWrapper;