@builder.io/sdk-react-native 0.0.1-55 → 0.0.1-56

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+### 0.0.1-55
+
+🐛 Fix: custom components were not rendering correctly
+🐛 Fix: Image component's `srcSet` was not being set correctly
+
 ### 0.0.1-52
 
 🧨 Breaking change: the format of the `customComponents` prop has changed from `[{ component, info }]` to `[{ component, ...info }]`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-55",
+  "version": "0.0.1-56",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"

package/src/components/render-block/block-styles.js

@@ -1,16 +1,27 @@
 import * as React from "react";
+import { useContext } from "react";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import RenderInlinedStyles from "../render-inlined-styles.js";
 function BlockStyles(props) {
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context
+    });
+  }
   function camelToKebabCase(string) {
     return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
   }
   function css() {
     var _a;
-    const styleObject = (_a = props.block.responsiveStyles) == null ? void 0 : _a.large;
+    const styleObject = (_a = useBlock().responsiveStyles) == null ? void 0 : _a.large;
     if (!styleObject) {
       return "";
     }
-    let str = `.${props.block.id} {`;
+    let str = `.${useBlock().id} {`;
     for (const key in styleObject) {
       const value = styleObject[key];
       if (typeof value === "string") {
@@ -20,9 +31,10 @@ function BlockStyles(props) {
     str += "}";
     return str;
   }
-  return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+  const builderContext = useContext(BuilderContext);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "vue" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
     styles: css()
-  });
+  })) : null);
 }
 export {
   BlockStyles as default

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

@@ -1,8 +1,20 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import RenderInlinedStyles from "../render-inlined-styles.lite";
 
 export default function BlockStyles(props) {
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context,
+    });
+  }
+
   function camelToKebabCase(string) {
     return string
       .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
@@ -11,13 +23,13 @@ export default function BlockStyles(props) {
 
   function css() {
     // TODO: media queries
-    const styleObject = props.block.responsiveStyles?.large;
+    const styleObject = useBlock().responsiveStyles?.large;
 
     if (!styleObject) {
       return "";
     }
 
-    let str = `.${props.block.id} {`;
+    let str = `.${useBlock().id} {`;
 
     for (const key in styleObject) {
       const value = styleObject[key];
@@ -31,5 +43,15 @@ export default function BlockStyles(props) {
     return str;
   }
 
-  return <RenderInlinedStyles styles={css()} />;
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <>
+      {TARGET === "vue" || TARGET === "svelte" ? (
+        <>
+          <RenderInlinedStyles styles={css()} />
+        </>
+      ) : null}
+    </>
+  );
 }

package/src/components/render-block/render-block.js

@@ -31,7 +31,6 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import { useContext } from "react";
-import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -41,8 +40,9 @@ import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.js";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component.js";
 function RenderBlock(props) {
-  var _a, _b, _c, _d;
+  var _a, _b;
   function component() {
     var _a2;
     const componentName = (_a2 = useBlock().component) == null ? void 0 : _a2.name;
@@ -81,18 +81,23 @@ function RenderBlock(props) {
       context: builderContext.context
     });
   }
-  function propertiesAndActions() {
-    return __spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
+  function attributes() {
+    return __spreadProps(__spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
       block: useBlock(),
       state: builderContext.state,
       context: builderContext.context
-    }));
+    })), {
+      style: getBlockStyles(useBlock())
+    });
   }
-  function css() {
-    return getBlockStyles(useBlock());
+  function shouldWrap() {
+    var _a2;
+    return !((_a2 = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a2.noWrap);
   }
   function componentOptions() {
-    return getBlockComponentOptions(useBlock());
+    return __spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
+      attributes: attributes()
+    });
   }
   function children() {
     var _a2;
@@ -102,30 +107,22 @@ function RenderBlock(props) {
     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, !isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
-    style: css()
-  }), TARGET === "vue" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BlockStyles, {
-    block: useBlock()
-  })) : null, componentRef() ? /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
-    builderBlock: useBlock()
-  }), (_b = children()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    key: child.id,
-    block: child
-  }))) : null, (_c = noCompRefChildren()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    key: child.id,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), /* @__PURE__ */ React.createElement(RenderComponent, {
+    blockChildren: children(),
+    componentRef: componentRef(),
+    componentOptions: componentOptions()
+  }), (_a = noCompRefChildren()) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: "render-block-" + child.id,
     block: child
-  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
-    style: css()
-  }))) : /* @__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, {
-    key: child.id,
+  })), (_b = noCompRefChildren()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
+    key: "block-style-" + child.id,
     block: child
-  }))));
+  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : /* @__PURE__ */ React.createElement(RenderComponent, {
+    blockChildren: children(),
+    componentRef: componentRef(),
+    componentOptions: componentOptions()
+  }));
 }
 export {
   RenderBlock as default

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useContext } from "react";
-import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -11,6 +10,7 @@ import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles.lite";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component.lite";
 
 export default function RenderBlock(props) {
   function component() {
@@ -58,7 +58,7 @@ export default function RenderBlock(props) {
     });
   }
 
-  function propertiesAndActions() {
+  function attributes() {
     return {
       ...getBlockProperties(useBlock()),
       ...getBlockActions({
@@ -66,15 +66,28 @@ export default function RenderBlock(props) {
         state: builderContext.state,
         context: builderContext.context,
       }),
+      style: getBlockStyles(useBlock()),
     };
   }
 
-  function css() {
-    return getBlockStyles(useBlock());
+  function shouldWrap() {
+    return !componentInfo?.()?.noWrap;
   }
 
   function componentOptions() {
-    return getBlockComponentOptions(useBlock());
+    return {
+      ...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.
+       */
+      ...(shouldWrap()
+        ? {}
+        : {
+            attributes: attributes(),
+          }),
+    };
   }
 
   function children() {
@@ -86,58 +99,49 @@ export default function RenderBlock(props) {
   }
 
   function noCompRefChildren() {
+    /**
+     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+     * we render them outside of `componentRef`
+     */
     return componentRef() ? [] : children();
   }
 
   const builderContext = useContext(BuilderContext);
 
-  const ComponentRefRef = componentRef();
   const TagNameRef = tagName();
 
   return (
     <>
-      {!componentInfo?.()?.noWrap ? (
+      {shouldWrap() ? (
         <>
           {!isEmptyHtmlElement(tagName()) ? (
             <>
-              <TagNameRef {...propertiesAndActions()} style={css()}>
-                {TARGET === "vue" || TARGET === "svelte" ? (
-                  <>
-                    <BlockStyles block={useBlock()} />
-                  </>
-                ) : null}
-
-                {componentRef() ? (
-                  <ComponentRefRef
-                    {...componentOptions()}
-                    builderBlock={useBlock()}
-                  >
-                    {children()?.map((child) => (
-                      <RenderBlock key={child.id} block={child} />
-                    ))}
-                  </ComponentRefRef>
-                ) : null}
+              <TagNameRef {...attributes()}>
+                <RenderComponent
+                  blockChildren={children()}
+                  componentRef={componentRef()}
+                  componentOptions={componentOptions()}
+                />
+
+                {noCompRefChildren()?.map((child) => (
+                  <RenderBlock key={"render-block-" + child.id} block={child} />
+                ))}
 
                 {noCompRefChildren()?.map((child) => (
-                  <RenderBlock key={child.id} block={child} />
+                  <BlockStyles key={"block-style-" + child.id} block={child} />
                 ))}
               </TagNameRef>
             </>
           ) : (
-            <TagNameRef {...propertiesAndActions()} style={css()} />
+            <TagNameRef {...attributes()} />
           )}
         </>
       ) : (
-        <ComponentRefRef
-          {...componentOptions()}
-          attributes={propertiesAndActions()}
-          builderBlock={useBlock()}
-          style={css()}
-        >
-          {children()?.map((child) => (
-            <RenderBlock key={child.id} block={child} />
-          ))}
-        </ComponentRefRef>
+        <RenderComponent
+          blockChildren={children()}
+          componentRef={componentRef()}
+          componentOptions={componentOptions()}
+        />
       )}
     </>
   );

package/src/components/render-block/render-component.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import * as React from "react";
+import BlockStyles from "./block-styles.js";
+import RenderBlock from "./render-block.js";
+function RenderComponent(props) {
+  var _a, _b;
+  const ComponentRefRef = props.componentRef;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, props.componentOptions), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: "render-block-" + child.id,
+    block: child
+  })), (_b = props.blockChildren) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
+    key: "block-style-" + child.id,
+    block: child
+  })))) : null);
+}
+export {
+  RenderComponent as default
+};

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import BlockStyles from "./block-styles.lite";
+import RenderBlock from "./render-block.lite";
+
+export default function RenderComponent(props) {
+  const ComponentRefRef = props.componentRef;
+
+  return (
+    <>
+      {props.componentRef ? (
+        <>
+          <ComponentRefRef {...props.componentOptions}>
+            {props.blockChildren?.map((child) => (
+              <RenderBlock key={"render-block-" + child.id} block={child} />
+            ))}
+
+            {props.blockChildren?.map((child) => (
+              <BlockStyles key={"block-style-" + child.id} block={child} />
+            ))}
+          </ComponentRefRef>
+        </>
+      ) : null}
+    </>
+  );
+}

package/src/components/render-blocks.js

@@ -1,17 +1,18 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.js";
 import RenderBlock from "./render-block/render-block.js";
 function RenderBlocks(props) {
-  var _a;
+  var _a, _b;
   function className() {
     var _a2;
     return "builder-blocks" + (!((_a2 = props.blocks) == null ? void 0 : _a2.length) ? " no-blocks" : "");
   }
   function onClick() {
-    var _a2, _b;
+    var _a2, _b2;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null ? void 0 : _b.postMessage({
+      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
         type: "builder.clickEmptyBlocks",
         data: {
           parentElementId: props.parent,
@@ -21,9 +22,9 @@ function RenderBlocks(props) {
     }
   }
   function onMouseEnter() {
-    var _a2, _b;
+    var _a2, _b2;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null ? void 0 : _b.postMessage({
+      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
         type: "builder.hoverEmptyBlocks",
         data: {
           parentElementId: props.parent,
@@ -42,7 +43,10 @@ function RenderBlocks(props) {
     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, {
-    key: block.id,
+    key: "render-block-" + block.id,
+    block
+  }))) : null, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = props.blocks) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(BlockStyles, {
+    key: "block-style-" + block.id,
     block
   }))) : null);
 }

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.lite";
 import RenderBlock from "./render-block/render-block.lite";
 
 export default function RenderBlocks(props) {
@@ -52,7 +53,15 @@ export default function RenderBlocks(props) {
       {props.blocks ? (
         <>
           {props.blocks?.map((block) => (
-            <RenderBlock key={block.id} block={block} />
+            <RenderBlock key={"render-block-" + block.id} block={block} />
+          ))}
+        </>
+      ) : null}
+
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <BlockStyles key={"block-style-" + block.id} block={block} />
           ))}
         </>
       ) : null}

package/src/functions/get-block-component-options.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 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;
@@ -15,9 +17,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
   getBlockComponentOptions