@builder.io/sdk-react-native 0.0.1-54 → 0.0.1-57

package/CHANGELOG.md

@@ -1,6 +1,16 @@
+### 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 }]`.
+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.
+
 ### 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-54",
+  "version": "0.0.1-57",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"

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

@@ -1,7 +1,14 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Button(props) {
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+  link?: string;
+  openLinkInNewTab?: boolean;
+}
+
+export default function Button(props: ButtonProps) {
   return (
     <>
       {props.link ? (

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

@@ -1,8 +1,25 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+type Column = {
+  blocks: any; // TODO: Implement this when support for dynamic CSS lands
+
+  width?: number;
+};
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps {
+  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
+
+  space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+  stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+
+  reverseColumnsWhenStacked?: boolean;
+}
+
 import RenderBlocks from "../../components/render-blocks.lite";
 
-export default function Columns(props) {
+export default function Columns(props: ColumnProps) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }

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/custom-code/custom-code.lite.tsx

@@ -2,7 +2,13 @@ import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef, useEffect } from "react";
 
-export default function CustomCode(props) {
+export interface CustomCodeProps {
+  code: string;
+  replaceNodes?: boolean;
+}
+
+export default function CustomCode(props: CustomCodeProps) {
+  const elem = useRef<HTMLDivElement>(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
   const [scriptsRun, setScriptsRun] = useState(() => []);
@@ -10,7 +16,6 @@ export default function CustomCode(props) {
   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++) {
@@ -49,8 +54,6 @@ export default 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/embed/embed.lite.tsx

@@ -2,7 +2,12 @@ import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef, useEffect } from "react";
 
-export default function Embed(props) {
+export interface EmbedProps {
+  content: string;
+}
+
+export default function Embed(props: EmbedProps) {
+  const elem = useRef<HTMLDivElement>(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
   const [scriptsRun, setScriptsRun] = useState(() => []);
@@ -10,7 +15,6 @@ export default function Embed(props) {
   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++) {
@@ -49,8 +53,6 @@ export default 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/blocks/form/form.lite.tsx

@@ -1,10 +1,64 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef } from "react";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export type FormState = "unsubmitted" | "sending" | "success" | "error";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+interface BuilderElement {}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export interface FormProps {
+  attributes?: any;
+  name?: string;
+  action?: string;
+  validate?: boolean;
+  method?: string;
+  builderBlock?: BuilderElement;
+  sendSubmissionsTo?: string;
+  sendSubmissionsToEmail?: string;
+  sendWithJs?: boolean;
+  contentType?: string;
+  customHeaders?: {
+    [key: string]: string;
+  };
+  successUrl?: string;
+  previewState?: FormState;
+  successMessage?: BuilderElement[];
+  errorMessage?: BuilderElement[];
+  sendingMessage?: BuilderElement[];
+  resetFormOnSubmit?: boolean;
+  errorMessagePath?: string;
+}
+
 import RenderBlock from "../../components/render-block/render-block.lite";
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function FormComponent(props) {
+export default function FormComponent(props: FormProps) {
+  const formRef = useRef(null);
   const [formState, setFormState] = useState(() => "unsubmitted");
 
   const [responseData, setResponseData] = useState(() => null);
@@ -142,7 +196,7 @@ export default function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
+                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message =
                   JSON.stringify(message);
               }
               setFormErrorMessage(message);
@@ -198,7 +252,6 @@ export default function FormComponent(props) {
       );
     }
   }
-  const formRef = useRef();
   return (
     <View
       {...props.attributes}

package/src/blocks/fragment/fragment.lite.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function FragmentComponent(props) {
+export interface FragmentProps {
+  maxWidth?: number;
+  attributes?: any;
+  children?: any;
+}
+
+export default function FragmentComponent(props: FragmentProps) {
   return (
     <View>
       <Text>{props.children}</Text>

package/src/blocks/image/image.lite.tsx

@@ -1,7 +1,24 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Image(props) {
+export interface ImageProps {
+  className?: string;
+  image: string;
+  sizes?: string;
+  lazy?: boolean;
+  height?: number;
+  width?: number;
+  altText?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  srcset?: string;
+  aspectRatio?: number;
+  children?: any;
+  fitContent?: boolean;
+  builderBlock?: any;
+}
+
+export default function Image(props: ImageProps) {
   return (
     <View style={styles.view1}>
       <View>
@@ -15,7 +32,7 @@ export default function Image(props) {
           sizes={props.sizes}
         />
 
-        <View srcSet={props.srcset} />
+        <View srcset={props.srcset} />
       </View>
 
       {props.aspectRatio &&

package/src/blocks/img/img.lite.tsx

@@ -1,8 +1,26 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export interface ImgProps {
+  attributes?: any;
+  imgSrc?: string;
+  altText?: string;
+  backgroundSize?: "cover" | "contain";
+  backgroundPosition?:
+    | "center"
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "top left"
+    | "top right"
+    | "bottom left"
+    | "bottom right";
+}
+
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function ImgComponent(props) {
+export default function ImgComponent(props: ImgProps) {
   return (
     <View
       {...props.attributes}

package/src/blocks/input/input.lite.tsx

@@ -1,8 +1,19 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export interface FormInputProps {
+  type?: string;
+  attributes?: any;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  required?: boolean;
+}
+
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function FormInputComponent(props) {
+export default function FormInputComponent(props: FormInputProps) {
   return (
     <View
       {...props.attributes}

package/src/blocks/raw-text/raw-text.lite.tsx

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function RawText(props) {
+export interface RawTextProps {
+  attributes?: any;
+  text?: string; // builderBlock?: any;
+}
+
+export default function RawText(props: RawTextProps) {
   return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;
 }

package/src/blocks/section/section.lite.tsx

@@ -1,7 +1,14 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function SectionComponent(props) {
+export interface SectionProps {
+  maxWidth?: number;
+  attributes?: any;
+  children?: any;
+  builderBlock?: any;
+}
+
+export default function SectionComponent(props: SectionProps) {
   return (
     <View
       {...props.attributes}

package/src/blocks/select/select.lite.tsx

@@ -1,8 +1,20 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export interface FormSelectProps {
+  options?: {
+    name?: string;
+    value: string;
+  }[];
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+}
+
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function SelectComponent(props) {
+export default function SelectComponent(props: FormSelectProps) {
   return (
     <View
       {...props.attributes}

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

@@ -1,7 +1,12 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function SubmitButton(props) {
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+}
+
+export default function SubmitButton(props: ButtonProps) {
   return (
     <View {...props.attributes} type="submit">
       <Text>{props.text}</Text>

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

@@ -3,6 +3,7 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
+  builtIn: true,
   inputs: [
     {
       name: "symbol",

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,11 +1,30 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useContext, useEffect } from "react";
+
+export interface SymbolInfo {
+  model?: string;
+  entry?: string;
+  data?: any;
+  content?: any;
+  inline?: boolean;
+  dynamic?: boolean;
+}
+export interface SymbolProps {
+  symbol?: SymbolInfo;
+  dataOnly?: boolean;
+  dynamic?: boolean;
+  builderBlock?: any; // TODO: BuilderElement
+
+  attributes?: any;
+  inheritState?: boolean;
+}
+
 import RenderContent from "../../components/render-content/render-content.lite";
 import BuilderContext from "../../context/builder.context";
 import { getContent } from "../../functions/get-content/index.js";
 
-export default function Symbol(props) {
+export default function Symbol(props: SymbolProps) {
   const [className, setClassName] = useState(() => "builder-symbol");
 
   const [content, setContent] = useState(() => null);

package/src/blocks/text/text.lite.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Text(props) {
+export default function Text(props: { text: string }) {
   return <View dangerouslySetInnerHTML={{ __html: props.text }} />;
 }

package/src/blocks/textarea/textarea.lite.tsx

@@ -1,7 +1,15 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Textarea(props) {
+export interface TextareaProps {
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+export default function Textarea(props: TextareaProps) {
   return (
     <View
       {...props.attributes}

package/src/blocks/video/video.lite.tsx

@@ -1,7 +1,33 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Video(props) {
+export interface VideoProps {
+  attributes?: any;
+  video?: string;
+  autoPlay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+  aspectRatio?: number;
+  width?: number;
+  height?: number;
+  fit?: "contain" | "cover" | "fill";
+  position?:
+    | "center"
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "top left"
+    | "top right"
+    | "bottom left"
+    | "bottom right";
+  posterImage?: string;
+  lazyLoad?: boolean;
+}
+
+export default function Video(props: VideoProps) {
   return (
     <View
       {...props.attributes}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function ErrorBoundary(props) {
+export default function ErrorBoundary(props: any) {
   return <></>;
 }

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,24 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+
+export type BlockStylesProps = {
+  block: BuilderBlock;
+};
+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) {
+export default function BlockStyles(props: BlockStylesProps) {
+  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 +27,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 +47,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

@@ -17,9 +17,20 @@ var __spreadValues = (a, b) => {
   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];
+    }
+  return target;
+};
 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";
@@ -29,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;
@@ -48,8 +60,12 @@ function RenderBlock(props) {
     }
   }
   function componentInfo() {
-    var _a2;
-    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.info;
+    if (component()) {
+      const _a2 = component(), { component: _ } = _a2, info = __objRest(_a2, ["component"]);
+      return info;
+    } else {
+      return void 0;
+    }
   }
   function componentRef() {
     var _a2;
@@ -65,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;
@@ -86,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,11 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useContext } from "react";
-import { TARGET } from "../../constants/target.js";
+
+export type RenderBlockProps = {
+  block: BuilderBlock;
+}; // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -11,8 +15,9 @@ 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) {
+export default function RenderBlock(props: RenderBlockProps) {
   function component() {
     const componentName = useBlock().component?.name;
 
@@ -34,7 +39,12 @@ export default function RenderBlock(props) {
   }
 
   function componentInfo() {
-    return component?.()?.info;
+    if (component()) {
+      const { component: _, ...info } = component();
+      return info;
+    } else {
+      return undefined;
+    }
   }
 
   function componentRef() {
@@ -53,7 +63,7 @@ export default function RenderBlock(props) {
     });
   }
 
-  function propertiesAndActions() {
+  function attributes() {
     return {
       ...getBlockProperties(useBlock()),
       ...getBlockActions({
@@ -61,15 +71,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() {
@@ -81,58 +104,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,32 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+type Props = {
+  componentRef: any;
+  componentOptions: any;
+  blockChildren: BuilderBlock[];
+};
+import BlockStyles from "./block-styles.lite";
+import RenderBlock from "./render-block.lite";
+
+export default function RenderComponent(props: 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,9 +1,16 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export type RenderBlockProps = {
+  blocks?: BuilderBlock[];
+  parent?: string;
+  path?: string;
+};
 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) {
+export default function RenderBlocks(props: RenderBlockProps) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   }
@@ -52,7 +59,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/components/render-content/components/render-styles.lite.tsx

@@ -1,8 +1,22 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+interface CustomFont {
+  family?: string;
+  kind?: string;
+  fileUrl?: string;
+  files?: {
+    [key: string]: string;
+  };
+}
+interface Props {
+  cssCode?: string;
+  customFonts?: CustomFont[];
+}
+
 import RenderInlinedStyles from "../../render-inlined-styles.lite";
 
-export default function RenderContentStyles(props) {
+export default function RenderContentStyles(props: Props) {
   function getCssFromFont(font) {
     // TODO: compute what font sizes are used and only load those.......
     const family =

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

@@ -1,6 +1,33 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useContext, useEffect } from "react";
+
+export type RenderContentProps = {
+  content?: BuilderContent;
+  model?: string;
+  data?: {
+    [key: string]: any;
+  };
+  context?: {
+    [key: string]: any;
+  };
+  apiKey: string;
+  customComponents?: RegisteredComponent[];
+};
+interface BuilderComponentStateChange {
+  state: {
+    [key: string]: any;
+  };
+  ref: {
+    name?: string;
+    props?: {
+      builderBlock?: {
+        id?: string;
+      };
+    };
+  };
+}
+
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
@@ -23,7 +50,7 @@ import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.lite";
 import RenderContentStyles from "./components/render-styles.lite";
 
-export default function RenderContent(props) {
+export default function RenderContent(props: RenderContentProps) {
   function useContent() {
     const mergedContent = {
       ...props.content,

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

@@ -1,8 +1,13 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+interface Props {
+  styles: string;
+}
+
 import { TARGET } from "../constants/target.js";
 
-export default function RenderInlinedStyles(props) {
+export default function RenderInlinedStyles(props: Props) {
   function injectedStyleScript() {
     return `<${tagName()}>${props.styles}</${tagName()}>`;
   }

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/functions/get-block-styles.js

@@ -27,7 +27,7 @@ function validateReactNativeStyles(styles) {
       }
       delete styles[key];
     }
-    if (typeof propertyValue === "string" && propertyValue.match(/^\-?\d/)) {
+    if (typeof propertyValue === "string" && propertyValue.match(/^-?\d/)) {
       const newValue = parseFloat(propertyValue);
       if (!isNaN(newValue)) {
         styles[key] = newValue;

package/src/functions/macro-eval.js

@@ -1,6 +0,0 @@
-import * as React from 'react';
-function macroEval(items, string) {
-}
-export {
-  macroEval
-};