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

package/package.json

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

package/src/components/render-block/block-styles.js

@@ -4,35 +4,34 @@ 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({
       block: props.block,
       state: builderContext.state,
-      context: builderContext.context
+      context: builderContext.context,
+      evaluateBindings: true
     });
   }
-  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/components/render-block/render-block.js

@@ -38,14 +38,21 @@ import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockStyles } from "../../functions/get-block-styles.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { evaluate } from "../../functions/evaluate.js";
 import BlockStyles from "./block-styles.js";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
 import RenderComponent from "./render-component.js";
+import RenderRepeatedBlock from "./render-repeated-block.js";
 function RenderBlock(props) {
-  var _a, _b;
+  var _a, _b, _c;
   function component() {
     var _a2;
-    const componentName = (_a2 = useBlock().component) == null ? void 0 : _a2.name;
+    const componentName = (_a2 = getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context,
+      evaluateBindings: false
+    }).component) == null ? void 0 : _a2.name;
     if (!componentName) {
       return null;
     }
@@ -75,10 +82,11 @@ function RenderBlock(props) {
     return getBlockTag(useBlock());
   }
   function useBlock() {
-    return getProcessedBlock({
+    return repeatItemData() ? props.block : getProcessedBlock({
       block: props.block,
       state: builderContext.state,
-      context: builderContext.context
+      context: builderContext.context,
+      evaluateBindings: true
     });
   }
   function attributes() {
@@ -99,30 +107,64 @@ function RenderBlock(props) {
       attributes: attributes()
     });
   }
+  function renderComponentProps() {
+    return {
+      blockChildren: children(),
+      componentRef: componentRef(),
+      componentOptions: componentOptions()
+    };
+  }
   function children() {
     var _a2;
     return (_a2 = useBlock().children) != null ? _a2 : [];
   }
-  function noCompRefChildren() {
-    return componentRef() ? [] : children();
+  function childrenWithoutParentComponent() {
+    const shouldRenderChildrenOutsideRef = !componentRef() && !repeatItemData();
+    return shouldRenderChildrenOutsideRef ? children() : [];
+  }
+  function repeatItemData() {
+    const _a2 = props.block, { repeat } = _a2, blockWithoutRepeat = __objRest(_a2, ["repeat"]);
+    if (!(repeat == null ? void 0 : repeat.collection)) {
+      return void 0;
+    }
+    const { collection, itemName } = repeat;
+    const itemsArray = evaluate({
+      code: collection,
+      state: builderContext.state,
+      context: builderContext.context
+    });
+    if (Array.isArray(itemsArray)) {
+      const collectionName = collection.split(".").pop();
+      const itemNameToUse = itemName || (collectionName ? collectionName + "Item" : "item");
+      const repeatArray = itemsArray.map((item, index) => ({
+        context: __spreadProps(__spreadValues({}, builderContext), {
+          state: __spreadProps(__spreadValues({}, builderContext.state), {
+            $index: index,
+            $item: item,
+            [itemNameToUse]: item,
+            [`$${itemNameToUse}Index`]: index
+          })
+        }),
+        block: blockWithoutRepeat
+      }));
+      return repeatArray;
+    } else {
+      return void 0;
+    }
   }
   const builderContext = useContext(BuilderContext);
   const TagNameRef = tagName();
-  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, {
+  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()), repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
+    key: index,
+    repeatContext: data.context,
+    block: data.block
+  }))) : /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
     block: child
-  })), (_b = noCompRefChildren()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
+  })), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.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()
-  }));
+  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, renderComponentProps())));
 }
 export {
   RenderBlock as default

package/src/components/render-block/render-repeated-block.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import BuilderContext from "../../context/builder.context";
+import RenderBlock from "./render-block.js";
+function RenderRepeatedBlock(props) {
+  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
+    value: {
+      get content() {
+        return props.repeatContext.content;
+      },
+      get state() {
+        return props.repeatContext.state;
+      },
+      get context() {
+        return props.repeatContext.context;
+      },
+      get apiKey() {
+        return props.repeatContext.apiKey;
+      },
+      get registeredComponents() {
+        return props.repeatContext.registeredComponents;
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(RenderBlock, {
+    block: props.block
+  }));
+}
+export {
+  RenderRepeatedBlock as default
+};

package/src/components/render-content/render-content.js

@@ -77,8 +77,8 @@ function RenderContent(props) {
     var _a2, _b2;
     return __spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), overrideState);
   }
-  function context() {
-    return {};
+  function contextContext() {
+    return props.context || {};
   }
   function allRegisteredComponents() {
     const allComponentsArray = [
@@ -114,7 +114,7 @@ function RenderContent(props) {
     if (jsCode) {
       evaluate({
         code: jsCode,
-        context: context(),
+        context: contextContext(),
         state: contentState()
       });
     }
@@ -125,7 +125,7 @@ function RenderContent(props) {
   function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
       code: group,
-      context: context(),
+      context: contextContext(),
       state: contentState()
     }));
   }
@@ -228,7 +228,7 @@ function RenderContent(props) {
         return contentState();
       },
       get context() {
-        return context();
+        return contextContext();
       },
       get apiKey() {
         return props.apiKey;

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/functions/convert-style-object.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+const convertStyleObject = (obj) => {
+  return obj;
+};
+export {
+  convertStyleObject
+};

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

@@ -15,45 +15,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const propertiesThatMustBeNumber = new Set(["lineHeight"]);
-const displayValues = new Set(["flex", "none"]);
-const SHOW_WARNINGS = false;
-function validateReactNativeStyles(styles) {
-  for (const key in styles) {
-    const propertyValue = styles[key];
-    if (key === "display" && !displayValues.has(propertyValue)) {
-      if (SHOW_WARNINGS) {
-        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
-      }
-      delete styles[key];
-    }
-    if (typeof propertyValue === "string" && propertyValue.match(/^-?\d/)) {
-      const newValue = parseFloat(propertyValue);
-      if (!isNaN(newValue)) {
-        styles[key] = newValue;
-      }
-      if (typeof newValue === "number" && newValue < 0) {
-        styles[key] = 0;
-      }
-    }
-    if (propertiesThatMustBeNumber.has(key) && typeof styles[key] !== "number") {
-      if (SHOW_WARNINGS) {
-        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
-      }
-      delete styles[key];
-    }
-  }
-}
+import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
+import { convertStyleObject } from "./convert-style-object.js";
+import { sanitizeBlockStyles } from "./sanitize-styles.js";
 function getBlockStyles(block) {
-  var _a, _b, _c;
-  const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
+  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) {
-    Object.assign(styles, block.responsiveStyles.medium);
+    styles[getMaxWidthQueryForSize("medium")] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
   }
-  if ((_c = block.responsiveStyles) == null ? void 0 : _c.small) {
-    Object.assign(styles, block.responsiveStyles.small);
+  if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
+    styles[getMaxWidthQueryForSize("small")] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
   }
-  validateReactNativeStyles(styles);
+  sanitizeBlockStyles(styles);
   return styles;
 }
 export {

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

@@ -21,9 +21,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { evaluate } from "./evaluate.js";
 import { set } from "./set.js";
 import { transformBlock } from "./transform-block.js";
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
+const evaluateBindings = ({
+  block,
+  context,
+  state
+}) => {
   if (!block.bindings) {
     return block;
   }
@@ -33,14 +35,19 @@ function getProcessedBlock(options) {
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
-    const value = evaluate({
-      code: expression,
-      state,
-      context
-    });
+    const value = evaluate({ code: expression, state, context });
     set(copied, binding, value);
   }
   return copied;
+};
+function getProcessedBlock(options) {
+  const { state, context } = options;
+  const block = transformBlock(options.block);
+  if (evaluateBindings) {
+    return evaluateBindings({ block, state, context });
+  } else {
+    return block;
+  }
 }
 export {
   getProcessedBlock

package/src/functions/get-processed-block.test.js

@@ -21,7 +21,8 @@ test("Can process bindings", () => {
   const processed = getProcessedBlock({
     block,
     context: {},
-    state: { test: "hello" }
+    state: { test: "hello" },
+    evaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

package/src/functions/sanitize-styles.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+const propertiesThatMustBeNumber = new Set(["lineHeight"]);
+const displayValues = new Set(["flex", "none"]);
+const SHOW_WARNINGS = false;
+const sanitizeBlockStyles = (styles) => {
+  for (const key in styles) {
+    const propertyValue = styles[key];
+    if (key === "display" && !displayValues.has(propertyValue)) {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
+      }
+      delete styles[key];
+    }
+    if (typeof propertyValue === "string" && propertyValue.match(/^-?\d/)) {
+      const newValue = parseFloat(propertyValue);
+      if (!isNaN(newValue)) {
+        styles[key] = newValue;
+      }
+      if (typeof newValue === "number" && newValue < 0) {
+        styles[key] = 0;
+      }
+    }
+    if (propertiesThatMustBeNumber.has(key) && typeof styles[key] !== "number") {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+      }
+      delete styles[key];
+    }
+  }
+};
+export {
+  sanitizeBlockStyles
+};

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/components/error-boundary.js

@@ -1,25 +0,0 @@
-import React from "react";
-import { Text } from "react-native";
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("Error rendering Builder.io block", error, errorInfo);
-  }
-  render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ React.createElement(Text, {
-        style: { color: "gray" }
-      }, "Error rendering Builder.io block");
-    }
-    return this.props.children;
-  }
-}
-export {
-  ErrorBoundary as default
-};