@builder.io/sdk-react-native 0.0.1 → 0.0.3

package/package.json

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

package/src/blocks/image/image.js

@@ -1,77 +1,41 @@
+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 { View, StyleSheet, Text } from "react-native";
-import { getSrcSet } from "./image.helpers.js";
+import { Image as ReactImage, View } from "react-native";
 function Image(props) {
-  var _a, _b, _c, _d;
-  function srcSetToUse() {
-    var _a2;
-    const imageToUse = props.image || props.src;
-    const url = imageToUse;
-    if (!url || !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
-      return props.srcset;
-    }
-    if (props.srcset && ((_a2 = props.image) == null ? void 0 : _a2.includes("builder.io/api/v1/image"))) {
-      if (!props.srcset.includes(props.image.split("?")[0])) {
-        console.debug("Removed given srcset");
-        return getSrcSet(url);
-      }
-    } else if (props.image && !props.srcset) {
-      return getSrcSet(url);
-    }
-    return getSrcSet(url);
-  }
-  function webpSrcSet() {
-    var _a2;
-    if (((_a2 = srcSetToUse == null ? void 0 : srcSetToUse()) == null ? void 0 : _a2.match(/builder\.io/)) && !props.noWebp) {
-      return srcSetToUse().replace(/\?/g, "?format=webp&");
-    } else {
-      return "";
-    }
-  }
-  return /* @__PURE__ */ React.createElement(View, {
-    style: styles.view1
-  }, /* @__PURE__ */ React.createElement(View, null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-    type: "image/webp",
-    srcset: webpSrcSet()
-  })) : null, /* @__PURE__ */ React.createElement(View, {
-    loading: "lazy",
-    alt: props.altText,
-    role: props.altText ? "presentation" : void 0,
-    style: styles.view2,
-    src: props.image,
-    srcset: srcSetToUse(),
-    sizes: props.sizes
+  return props.aspectRatio ? /* @__PURE__ */ React.createElement(View, {
+    style: { position: "relative" }
+  }, /* @__PURE__ */ React.createElement(ReactImage, {
+    resizeMode: props.backgroundSize || "contain",
+    style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
+    source: { uri: props.image }
   }), /* @__PURE__ */ React.createElement(View, {
-    srcset: srcSetToUse()
-  })), props.aspectRatio && !(props.fitContent && ((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length)) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-    style: styles.view3
-  })) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, null, props.children)) : null, !props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-    style: styles.view4
-  }, /* @__PURE__ */ React.createElement(Text, null, props.children))) : null);
+    style: {
+      width: "100%",
+      paddingTop: props.aspectRatio * 100 + "%"
+    }
+  })) : /* @__PURE__ */ React.createElement(ReactImage, {
+    resizeMode: props.backgroundSize || "contain",
+    style: __spreadValues(__spreadValues({
+      position: "relative"
+    }, props.width ? { width: props.width } : {}), props.height ? { height: props.height } : {}),
+    source: { uri: props.image }
+  });
 }
-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
-  }
-});
 export {
   Image as default
 };

package/src/blocks/text/text.js

@@ -1,8 +1,63 @@
+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 { View } from "react-native";
+import HTML from "react-native-render-html";
+function camelToKebabCase(string) {
+  return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+}
+function pick(object, keys) {
+  return keys.reduce((obj, key) => {
+    if (object && object.hasOwnProperty(key)) {
+      obj[key] = object[key];
+    }
+    return obj;
+  }, {});
+}
+const PICK_STYLES = ["textAlign"];
+function getBlockStyles(block) {
+  var _a, _b, _c;
+  const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
+  if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
+    Object.assign(styles, block.responsiveStyles.medium);
+  }
+  if ((_c = block.responsiveStyles) == null ? void 0 : _c.small) {
+    Object.assign(styles, block.responsiveStyles.small);
+  }
+  return styles;
+}
+function getCss(block) {
+  const styleObject = pick(getBlockStyles(block), PICK_STYLES);
+  if (!styleObject) {
+    return "";
+  }
+  let str = ``;
+  for (const key in styleObject) {
+    const value = styleObject[key];
+    if (typeof value === "string") {
+      str += `${camelToKebabCase(key)}: ${value};`;
+    }
+  }
+  return str;
+}
 function Text(props) {
-  return /* @__PURE__ */ React.createElement(View, {
-    dangerouslySetInnerHTML: { __html: props.text }
+  return /* @__PURE__ */ React.createElement(HTML, {
+    source: {
+      html: `<div style="${getCss(props.builderBlock)}">${props.text || ""}</div>`
+    }
   });
 }
 export {

package/src/functions/get-block-styles.js

@@ -15,17 +15,28 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
+import { TARGET } from "../constants/target.js";
 import { convertStyleObject } from "./convert-style-object.js";
 import { sanitizeBlockStyles } from "./sanitize-styles.js";
-function getBlockStyles(block) {
-  var _a, _b, _c, _d, _e;
-  const styles = __spreadValues(__spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large)), block.styles);
-  if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    styles[getMaxWidthQueryForSize("medium")] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
+const getStyleForTarget = (styles) => {
+  switch (TARGET) {
+    case "reactNative": {
+      return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? convertStyleObject(styles.medium) : {}), styles.small ? convertStyleObject(styles.small) : {});
+    }
+    default:
+      return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? {
+        [getMaxWidthQueryForSize("medium")]: convertStyleObject(styles.medium)
+      } : {}), styles.small ? {
+        [getMaxWidthQueryForSize("small")]: convertStyleObject(styles.small)
+      } : {});
   }
-  if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
-    styles[getMaxWidthQueryForSize("small")] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
+};
+function getBlockStyles(block) {
+  if (!block.responsiveStyles) {
+    return {};
   }
+  const styles = getStyleForTarget(block.responsiveStyles);
+  console.log("rn styles", styles);
   sanitizeBlockStyles(styles);
   return styles;
 }