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

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 0.0.1-56
+
+🐛 Fix: image block `srcSet` was incorrectly set as `srcset`
+
+### 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 }]`.
@@ -5,7 +14,7 @@ See [builder-registered-components.ts](/packages/sdks/src/constants/builder-regi
 
 ### 0.0.1-51
 
-⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated. 
+⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated.
 To register your custom components in Builder, you must now provide a `customComponents` array to the `RenderContent` component containing `[{ component, info }]`.
 See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
 

package/README.md

@@ -2,6 +2,10 @@
 
 This is the React-Native SDK. It is currently in beta.
 
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
 ## Feature Support
 
 To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).

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-58",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"

package/src/blocks/custom-code/custom-code.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
 function CustomCode(props) {
+  const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
   const [scriptsRun, setScriptsRun] = useState(() => []);
   function findAndRunScripts() {
@@ -36,7 +37,6 @@ function CustomCode(props) {
       }
     }
   }
-  const elem = useRef();
   useEffect(() => {
     findAndRunScripts();
   }, []);

package/src/blocks/embed/embed.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
 function Embed(props) {
+  const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
   const [scriptsRun, setScriptsRun] = useState(() => []);
   function findAndRunScripts() {
@@ -36,7 +37,6 @@ function Embed(props) {
       }
     }
   }
-  const elem = useRef();
   useEffect(() => {
     findAndRunScripts();
   }, []);

package/src/blocks/form/form.js

@@ -44,6 +44,7 @@ import RenderBlock from "../../components/render-block/render-block.js";
 import { isEditing } from "../../functions/is-editing.js";
 function FormComponent(props) {
   var _a, _b;
+  const formRef = useRef(null);
   const [formState, setFormState] = useState(() => "unsubmitted");
   const [responseData, setResponseData] = useState(() => null);
   const [formErrorMessage, setFormErrorMessage] = useState(() => "");
@@ -190,7 +191,6 @@ function FormComponent(props) {
       });
     }
   }
-  const formRef = useRef();
   return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
     validate: props.validate,
     ref: formRef,

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/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-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-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/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

package/src/blocks/button/button.lite.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function Button(props) {
-  return (
-    <>
-      {props.link ? (
-        <>
-          <View
-            {...props.attributes}
-            role="button"
-            href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
-          >
-            <Text>{props.text}</Text>
-          </View>
-        </>
-      ) : (
-        <View {...props.attributes}>
-          <Text>{props.text}</Text>
-        </View>
-      )}
-    </>
-  );
-}

package/src/blocks/columns/columns.lite.tsx

@@ -1,70 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import RenderBlocks from "../../components/render-blocks.lite";
-
-export default function Columns(props) {
-  function getGutterSize() {
-    return typeof props.space === "number" ? props.space || 0 : 20;
-  }
-
-  function getColumns() {
-    return props.columns || [];
-  }
-
-  function getWidth(index) {
-    const columns = getColumns();
-    return columns[index]?.width || 100 / columns.length;
-  }
-
-  function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-  }
-
-  function maybeApplyForTablet(prop) {
-    const _stackColumnsAt = props.stackColumnsAt || "tablet";
-
-    return _stackColumnsAt === "tablet" ? prop : "inherit";
-  }
-
-  function columnsCssVars() {
-    const flexDir =
-      props.stackColumnsAt === "never"
-        ? "inherit"
-        : props.reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column";
-    return {
-      "--flex-dir": flexDir,
-      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
-    };
-  }
-
-  function columnCssVars() {
-    const width = "100%";
-    const marginLeft = "0";
-    return {
-      "--column-width": width,
-      "--column-margin-left": marginLeft,
-      "--column-width-tablet": maybeApplyForTablet(width),
-      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
-    };
-  }
-
-  return (
-    <View style={styles.view1}>
-      {props.columns?.map((column, index) => (
-        <View style={styles.view2} key={index}>
-          <RenderBlocks blocks={column.blocks} />
-        </View>
-      ))}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { display: "flex", alignItems: "stretch" },
-  view2: { flexGrow: 1 },
-});

package/src/blocks/custom-code/custom-code.lite.tsx

@@ -1,59 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useRef, useEffect } from "react";
-
-export default function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-
-  function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== "undefined") {
-      /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName("script");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            "text/javascript",
-            "application/javascript",
-            "application/ecmascript",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`CustomCode`: Error running script:", error);
-          }
-        }
-      }
-    }
-  }
-
-  const elem = useRef();
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return <View ref={elem} dangerouslySetInnerHTML={{ __html: props.code }} />;
-}

package/src/blocks/embed/embed.lite.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useRef, useEffect } from "react";
-
-export default function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-
-  function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== "undefined") {
-      /** @type {HTMLScriptElement[]} */
-      const scripts = elem.current.getElementsByTagName("script");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            "text/javascript",
-            "application/javascript",
-            "application/ecmascript",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`Embed`: Error running script:", error);
-          }
-        }
-      }
-    }
-  }
-
-  const elem = useRef();
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return (
-    <View ref={elem} dangerouslySetInnerHTML={{ __html: props.content }} />
-  );
-}