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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-57",
+  "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/button/button.lite.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface ButtonProps {
-  attributes?: any;
-  text?: string;
-  link?: string;
-  openLinkInNewTab?: boolean;
-}
-
-export default function Button(props: ButtonProps) {
-  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,87 +0,0 @@
-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: ColumnProps) {
-  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,62 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useRef, useEffect } from "react";
-
-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(() => []);
-
-  function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem.current && typeof window !== "undefined") {
-      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);
-          }
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return <View ref={elem} dangerouslySetInnerHTML={{ __html: props.code }} />;
-}

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

@@ -1,63 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useRef, useEffect } from "react";
-
-export interface EmbedProps {
-  content: string;
-}
-
-export default function Embed(props: EmbedProps) {
-  const elem = useRef<HTMLDivElement>(null);
-  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") {
-      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);
-          }
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    findAndRunScripts();
-  }, []);
-
-  return (
-    <View ref={elem} dangerouslySetInnerHTML={{ __html: props.content }} />
-  );
-}

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

@@ -1,307 +0,0 @@
-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: FormProps) {
-  const formRef = useRef(null);
-  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");
-        }
-      );
-    }
-  }
-  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,16 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-export interface FragmentProps {
-  maxWidth?: number;
-  attributes?: any;
-  children?: any;
-}
-
-export default function FragmentComponent(props: FragmentProps) {
-  return (
-    <View>
-      <Text>{props.children}</Text>
-    </View>
-  );
-}

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

@@ -1,84 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-
-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>
-        <View
-          loading="lazy"
-          alt={props.altText}
-          role={props.altText ? "presentation" : undefined}
-          style={styles.view2}
-          src={props.image}
-          srcset={props.srcset}
-          sizes={props.sizes}
-        />
-
-        <View srcset={props.srcset} />
-      </View>
-
-      {props.aspectRatio &&
-      !(props.fitContent && props.builderBlock?.children?.length) ? (
-        <View style={styles.view3}>
-          <Text> </Text>
-        </View>
-      ) : null}
-
-      {props.builderBlock?.children?.length && props.fitContent ? (
-        <>
-          <Text>{props.children}</Text>
-        </>
-      ) : null}
-
-      {!props.fitContent ? (
-        <>
-          <View style={styles.view4}>
-            <Text>{props.children}</Text>
-          </View>
-        </>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { position: "relative" },
-  view2: {
-    opacity: 1,
-    transition: "opacity 0.2s ease-in-out",
-    position: "absolute",
-    height: 100,
-    width: 100,
-    top: 0,
-    left: 0,
-  },
-  view3: { width: 100, pointerEvents: "none", fontSize: 0 },
-  view4: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: 100,
-    height: 100,
-  },
-});