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

package/src/blocks/video.js

@@ -1,49 +1,95 @@
-import { registerComponent } from '../functions/register-component';
-
-        var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-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 __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]);
-  }
-return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
+import * as React from 'react';
 import { View } from "react-native";
+import ReactVideo from "react-native-video";
+import { registerComponent } from "../functions/register-component";
 function Video(props) {
-var _a;
-return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-  preload: "none",
-  style: __spreadProps(__spreadValues({
-    width: "100%",
-    height: "100%"
-  }, (_a = props.attributes) == null ? void 0 : _a.style), {
-    objectFit: props.fit,
-    objectPosition: props.position,
-    borderRadius: 1
-  }),
-  key: props.video || "no-src",
-  poster: props.posterImage,
-  autoPlay: props.autoPlay,
-  muted: props.muted,
-  controls: props.controls,
-  loop: props.loop
-}));
+  return /* @__PURE__ */ React.createElement(View, {
+    style: { position: "relative" }
+  }, /* @__PURE__ */ React.createElement(ReactVideo, {
+    paused: !props.autoPlay,
+    controls: props.controls,
+    muted: props.muted,
+    repeat: props.loop,
+    poster: props.posterImage,
+    posterResizeMode: props.fit || "contain",
+    resizeMode: props.fit || "contain",
+    style: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 1
+    },
+    source: { uri: props.video }
+  }), /* @__PURE__ */ React.createElement(View, {
+    style: {
+      width: "100%",
+      paddingTop: `${props.aspectRatio * 100}%`
+    }
+  }));
 }
+registerComponent(Video, {
+  name: "Video",
+  static: true,
+  builtIn: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
+  defaultStyles: {
+    position: "relative",
+    minHeight: "20px",
+    minWidth: "20px",
+    overflow: "hidden"
+  },
+  canHaveChildren: true,
+  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: "fit",
+      type: "text",
+      defaultValue: "cover",
+      enum: ["contain", "cover", "stretch"]
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      advanced: true,
+      defaultValue: 0.7004048582995948
+    }
+  ]
+});
 export {
-Video as default
+  Video as default
 };
-
-
-        registerComponent(Video, {name:'Video',canHaveChildren:true,defaultStyles:{minHeight:'20px',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,onChange:"        const 0.7004048582995948 = 0.7004048582995948;        function loadImage(url: string, timeout = 60000): Promise<HTMLImageElement> {          return new Promise((resolve, reject) => {            const img = document.createElement('img');            let loaded = false;            img.onload = () => {              loaded = true;              resolve(img);            };            img.addEventListener('error', event => {              console.warn('Image load failed', event.error);              reject(event.error);            });            img.src = url;            setTimeout(() => {              if (!loaded) {                reject(new Error('Image load timed out'));              }            }, timeout);          });        }        function round(num: number) {          return Math.round(num * 1000) / 1000;        }        // TODO        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        if (value && (!aspectRatio || aspectRatio === 0.7004048582995948)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === 0.7004048582995948)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));              }            }          });        }      "},{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}]});

package/src/blocks/video.lite.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
 
 export default function Video(props) {
   return (

package/src/components/block-styles.js

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

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,25 @@
+import React from "react";
+import { Text } from "react-native";
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(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 this.props.children;
+  }
+}
+export {
+  ErrorBoundary as default
+};

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

@@ -0,0 +1,6 @@
+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

@@ -27,11 +27,22 @@ 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;
@@ -42,42 +53,55 @@ function RenderBlock(props) {
     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());
-  }
-  function block() {
+  function useBlock() {
     return getProcessedBlock({
       block: props.block,
       state: builderContext.state,
       context: builderContext.context
     });
   }
-  function actions() {
-    return getBlockActions({
-      block: block(),
+  function propertiesAndActions() {
+    return __spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
+      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() {
+    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(),
+  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()
-  }))), !((_c = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _c.noWrap) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, properties()), {
+  }), /* @__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()
-  }), 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, {
+  }), (_d = children()) == null ? void 0 : _d.map((child, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
     block: child
-  }))))));
+  }))));
 }
 export {
   RenderBlock as default

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext } 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";
@@ -9,10 +9,26 @@ 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,10 @@ export default function RenderBlock(props) {
   }
 
   function tagName() {
-    return getBlockTag(block());
+    return getBlockTag(useBlock());
   }
 
-  function properties() {
-    return getBlockProperties(block());
-  }
-
-  function block() {
+  function useBlock() {
     return getProcessedBlock({
       block: props.block,
       state: builderContext.state,
@@ -39,20 +51,35 @@ export default function RenderBlock(props) {
     });
   }
 
-  function actions() {
-    return getBlockActions({
-      block: block(),
-      state: builderContext.state,
-      context: builderContext.context,
-    });
+  function propertiesAndActions() {
+    return {
+      ...getBlockProperties(useBlock()),
+      ...getBlockActions({
+        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 +89,38 @@ export default function RenderBlock(props) {
 
   return (
     <>
-      {componentInfo?.()?.noWrap && (
+      {!componentInfo?.()?.noWrap ? (
         <>
-          <ComponentRefRef
-            {...componentInfo?.()?.options}
-            attributes={properties()}
-            style={css()}
-          />
-        </>
-      )}
-
-      {!componentInfo?.()?.noWrap && (
-        <>
-          <TagNameRef {...properties()} style={css()}>
-            {componentRef() && <ComponentRefRef {...componentOptions()} />}
+          <TagNameRef {...propertiesAndActions()} style={css()}>
+            <BlockStyles block={useBlock()} />
 
-            {!componentRef() && block().children && block().children.length && (
-              <>
-                {block().children.map((child) => (
+            {componentRef() ? (
+              <ComponentRefRef
+                {...componentOptions()}
+                builderBlock={useBlock()}
+              >
+                {children()?.map((child, index) => (
                   <RenderBlock block={child} />
                 ))}
-              </>
-            )}
+              </ComponentRefRef>
+            ) : null}
+
+            {noCompRefChildren()?.map((child, index) => (
+              <RenderBlock block={child} />
+            ))}
           </TagNameRef>
         </>
+      ) : (
+        <ComponentRefRef
+          {...componentOptions()}
+          attributes={propertiesAndActions()}
+          builderBlock={useBlock()}
+          style={css()}
+        >
+          {children()?.map((child, index) => (
+            <RenderBlock block={child} />
+          ))}
+        </ComponentRefRef>
       )}
     </>
   );

package/src/components/render-blocks.js

@@ -4,6 +4,10 @@ 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)) {
@@ -29,15 +33,18 @@ function RenderBlocks(props) {
     }
   }
   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,
+    dataSet: {
+      class: className()
+    },
+    onClick: (event) => onClick(),
+    onMouseEnter: (event) => onMouseEnter(),
     style: styles.view1
-  }, props.blocks.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }, 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" }

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

@@ -1,10 +1,13 @@
 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";
 
 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(
@@ -37,16 +40,22 @@ export default function RenderBlocks(props) {
 
   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, index) => (
+            <RenderBlock key={block.id} block={block} />
+          ))}
+        </>
+      ) : null}
     </View>
   );
 }