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

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.0.1-56
+
+🐛 Fix: image block `srcSet` was incorrectly set as `srcset`
+
 ### 0.0.1-55
 
 🐛 Fix: custom components were not rendering correctly
@@ -10,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-56",
+  "version": "0.0.1-59",
   "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

@@ -4,6 +4,8 @@ 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";
+import { convertStyleMaptoCSS } from "../../helpers/css.js";
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
@@ -12,27 +14,23 @@ function BlockStyles(props) {
       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 = useBlock().responsiveStyles) == null ? void 0 : _a.large;
-    if (!styleObject) {
-      return "";
-    }
-    let str = `.${useBlock().id} {`;
-    for (const key in styleObject) {
-      const value = styleObject[key];
-      if (typeof value === "string") {
-        str += `${camelToKebabCase(key)}: ${value};`;
-      }
-    }
-    str += "}";
-    return str;
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles == null ? void 0 : styles.large;
+    const mediumStyles = styles == null ? void 0 : styles.medium;
+    const smallStyles = styles == null ? void 0 : styles.small;
+    return `
+      ${largeStyles ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
+      ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }` : ""}
+      ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
+          }` : ""}
+    }`;
   }
   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, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
     styles: css()
   })) : null);
 }

package/src/constants/device-sizes.js

@@ -1,11 +1,5 @@
 import * as React from 'react';
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
+const SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -20,21 +14,9 @@ const sizes = {
     min: 990,
     default: 991,
     max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
   }
 };
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
 export {
-  sizeNames,
-  sizes
+  getMaxWidthQueryForSize
 };

package/src/functions/camel-to-kebab-case.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export {
+  camelToKebabCase
+};

package/src/helpers/css.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { camelToKebabCase } from "../functions/camel-to-kebab-case";
+const convertStyleMaptoCSS = (style) => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${camelToKebabCase(key)}: ${value};`;
+    }
+  });
+  return cssProps.join("\n");
+};
+export {
+  convertStyleMaptoCSS
+};

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 }} />
-  );
-}

package/src/blocks/form/form.lite.tsx

@@ -1,254 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block.lite";
-import { isEditing } from "../../functions/is-editing.js";
-
-export default function FormComponent(props) {
-  const [formState, setFormState] = useState(() => "unsubmitted");
-
-  const [responseData, setResponseData] = useState(() => null);
-
-  const [formErrorMessage, setFormErrorMessage] = useState(() => "");
-
-  function submissionState() {
-    return (isEditing() && props.previewState) || formState;
-  }
-
-  function onSubmit(event) {
-    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-
-    if (props.sendSubmissionsTo === "zapier") {
-      event.preventDefault();
-    } else if (sendWithJs) {
-      if (!(props.action || props.sendSubmissionsTo === "email")) {
-        event.preventDefault();
-        return;
-      }
-
-      event.preventDefault();
-      const el = event.currentTarget;
-      const headers = props.customHeaders || {};
-      let body;
-      const formData = new FormData(el); // TODO: maybe support null
-
-      const formPairs = Array.from(
-        event.currentTarget.querySelectorAll("input,select,textarea")
-      )
-        .filter((el) => !!el.name)
-        .map((el) => {
-          let value;
-          const key = el.name;
-
-          if (el instanceof HTMLInputElement) {
-            if (el.type === "radio") {
-              if (el.checked) {
-                value = el.name;
-                return {
-                  key,
-                  value,
-                };
-              }
-            } else if (el.type === "checkbox") {
-              value = el.checked;
-            } else if (el.type === "number" || el.type === "range") {
-              const num = el.valueAsNumber;
-
-              if (!isNaN(num)) {
-                value = num;
-              }
-            } else if (el.type === "file") {
-              // TODO: one vs multiple files
-              value = el.files;
-            } else {
-              value = el.value;
-            }
-          } else {
-            value = el.value;
-          }
-
-          return {
-            key,
-            value,
-          };
-        });
-      let contentType = props.contentType;
-
-      if (props.sendSubmissionsTo === "email") {
-        contentType = "multipart/form-data";
-      }
-
-      Array.from(formPairs).forEach(({ value }) => {
-        if (
-          value instanceof File ||
-          (Array.isArray(value) && value[0] instanceof File) ||
-          value instanceof FileList
-        ) {
-          contentType = "multipart/form-data";
-        }
-      }); // TODO: send as urlEncoded or multipart by default
-      // because of ease of use and reliability in browser API
-      // for encoding the form?
-
-      if (contentType !== "application/json") {
-        body = formData;
-      } else {
-        // Json
-        const json = {};
-        Array.from(formPairs).forEach(({ value, key }) => {
-          set(json, key, value);
-        });
-        body = JSON.stringify(json);
-      }
-
-      if (contentType && contentType !== "multipart/form-data") {
-        if (
-          /* Zapier doesn't allow content-type header to be sent from browsers */ !(
-            sendWithJs && props.action?.includes("zapier.com")
-          )
-        ) {
-          headers["content-type"] = contentType;
-        }
-      }
-      const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
-      if (formRef.current) {
-        formRef.current.dispatchEvent(presubmitEvent);
-        if (presubmitEvent.defaultPrevented) {
-          return;
-        }
-      }
-      setFormState("sending");
-      const formUrl = `${
-        builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
-      }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
-        props.sendSubmissionsToEmail || ""
-      )}&name=${encodeURIComponent(props.name || "")}`;
-      fetch(
-        props.sendSubmissionsTo === "email"
-          ? formUrl
-          : props.action /* TODO: throw error if no action URL */,
-        { body, headers, method: props.method || "post" }
-      ).then(
-        async (res) => {
-          let body;
-          const contentType = res.headers.get("content-type");
-          if (contentType && contentType.indexOf("application/json") !== -1) {
-            body = await res.json();
-          } else {
-            body = await res.text();
-          }
-          if (!res.ok && props.errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */ let message =
-              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 =
-                  JSON.stringify(message);
-              }
-              setFormErrorMessage(message);
-            }
-          }
-          setResponseData(body);
-          setFormState(res.ok ? "success" : "error");
-          if (res.ok) {
-            const submitSuccessEvent = new CustomEvent("submit:success", {
-              detail: { res, body },
-            });
-            if (formRef.current) {
-              formRef.current.dispatchEvent(submitSuccessEvent);
-              if (submitSuccessEvent.defaultPrevented) {
-                return;
-              }
-              /* TODO: option to turn this on/off? */ if (
-                props.resetFormOnSubmit !== false
-              ) {
-                formRef.current.reset();
-              }
-            }
-            /* TODO: client side route event first that can be preventDefaulted */ if (
-              props.successUrl
-            ) {
-              if (formRef.current) {
-                const event = new CustomEvent("route", {
-                  detail: { url: props.successUrl },
-                });
-                formRef.current.dispatchEvent(event);
-                if (!event.defaultPrevented) {
-                  location.href = props.successUrl;
-                }
-              } else {
-                location.href = props.successUrl;
-              }
-            }
-          }
-        },
-        (err) => {
-          const submitErrorEvent = new CustomEvent("submit:error", {
-            detail: { error: err },
-          });
-          if (formRef.current) {
-            formRef.current.dispatchEvent(submitErrorEvent);
-            if (submitErrorEvent.defaultPrevented) {
-              return;
-            }
-          }
-          setResponseData(err);
-          setFormState("error");
-        }
-      );
-    }
-  }
-  const formRef = useRef();
-  return (
-    <View
-      {...props.attributes}
-      validate={props.validate}
-      ref={formRef}
-      action={!props.sendWithJs && props.action}
-      method={props.method}
-      name={props.name}
-      onSubmit={(event) => onSubmit(event)}
-    >
-      {" "}
-      {props.builderBlock && props.builderBlock.children ? (
-        <>
-          {props.builderBlock?.children?.map((block) => (
-            <RenderBlock block={block} />
-          ))}
-        </>
-      ) : null}{" "}
-      {submissionState() === "error" ? (
-        <>
-          <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage} />
-        </>
-      ) : null}{" "}
-      {submissionState() === "sending" ? (
-        <>
-          <BuilderBlocks
-            dataPath="sendingMessage"
-            blocks={props.sendingMessage}
-          />
-        </>
-      ) : null}{" "}
-      {submissionState() === "error" && responseData ? (
-        <>
-          <View style={styles.view1}>
-            {" "}
-            <Text>{JSON.stringify(responseData, null, 2)}</Text>{" "}
-          </View>
-        </>
-      ) : null}{" "}
-      {submissionState() === "success" ? (
-        <>
-          <BuilderBlocks
-            dataPath="successMessage"
-            blocks={props.successMessage}
-          />
-        </>
-      ) : null}{" "}
-    </View>
-  );
-}
-const styles = StyleSheet.create({
-  view1: { padding: 10, color: "red", textAlign: "center" },
-});

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

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export default function FragmentComponent(props) {
-  return (
-    <View>
-      <Text>{props.children}</Text>
-    </View>
-  );
-}