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

package/package.json

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

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

@@ -187,7 +187,31 @@ const componentInfo = {
           ]
         }
       ],
-      onChange: "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      "
+      onChange(options) {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+            if (containsColumnWithoutWidth) {
+              clearWidths();
+            } else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get("width");
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp) {
+                clearWidths();
+              }
+            }
+          }
+        }
+      }
     },
     {
       name: "space",

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

@@ -10,7 +10,26 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "
+      onChange(options) {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+            if (options.get("url") === url) {
+              if (data.html) {
+                options.set("content", data.html);
+              } else {
+                options.set("content", "Invalid url, please try another");
+              }
+            }
+          }).catch((_err) => {
+            options.set("content", "There was an error embedding this URL, please try again or another URL");
+          });
+        } else {
+          options.delete("content");
+        }
+      }
     },
     {
       name: "content",

package/src/blocks/embed/embed.js

@@ -1,45 +1,38 @@
 import * as React from "react";
 import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
+import { isJsScript } from "./helpers";
 function Embed(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
   const [scriptsRun, setScriptsRun] = useState(() => []);
+  const [ranInitFn, setRanInitFn] = useState(() => false);
   function findAndRunScripts() {
-    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);
-          }
+    const scripts = elem.current.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+      if (script.src && !scriptsInserted.includes(script.src)) {
+        scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
+        try {
+          scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`Embed`: Error running script:", error);
         }
       }
     }
   }
   useEffect(() => {
-    findAndRunScripts();
-  }, []);
+    if (elem.current && !ranInitFn) {
+      setRanInitFn(true);
+      findAndRunScripts();
+    }
+  }, [elem, ranInitFn]);
   return /* @__PURE__ */ React.createElement(View, {
     ref: elem,
     dangerouslySetInnerHTML: { __html: props.content }

package/src/blocks/embed/helpers.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+const SCRIPT_MIME_TYPES = [
+  "text/javascript",
+  "application/javascript",
+  "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+export {
+  isJsScript
+};

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

@@ -19,7 +19,53 @@ const componentInfo = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: "        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          return new Promise((resolve, reject) => {            const img = document.createElement('img');            let loaded = false;            img.onload = () => {              loaded = true;              resolve(img);            };            img.addEventListener('error', event => {              console.warn('Image load failed', event.error);              reject(event.error);            });            img.src = url;            setTimeout(() => {              if (!loaded) {                reject(new Error('Image load timed out'));              }            }, timeout);          });        }        function round(num) {          return Math.round(num * 1000) / 1000;        }        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        // For SVG images - don't render as webp, keep them as SVG        fetch(value)          .then(res => res.blob())          .then(blob => {            if (blob.type.includes('svg')) {              options.set('noWebp', true);            }          });        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));                options.set('height', img.height);                options.set('width', img.width);              }            }          });        }"
+      onChange(options) {
+        const DEFAULT_ASPECT_RATIO = 0.7041;
+        options.delete("srcset");
+        options.delete("noWebp");
+        function loadImage(url, timeout = 6e4) {
+          return new Promise((resolve, reject) => {
+            const img = document.createElement("img");
+            let loaded = false;
+            img.onload = () => {
+              loaded = true;
+              resolve(img);
+            };
+            img.addEventListener("error", (event) => {
+              console.warn("Image load failed", event.error);
+              reject(event.error);
+            });
+            img.src = url;
+            setTimeout(() => {
+              if (!loaded) {
+                reject(new Error("Image load timed out"));
+              }
+            }, timeout);
+          });
+        }
+        function round(num) {
+          return Math.round(num * 1e3) / 1e3;
+        }
+        const value = options.get("image");
+        const aspectRatio = options.get("aspectRatio");
+        fetch(value).then((res) => res.blob()).then((blob) => {
+          if (blob.type.includes("svg")) {
+            options.set("noWebp", true);
+          }
+        });
+        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
+          return loadImage(value).then((img) => {
+            const possiblyUpdatedAspectRatio = options.get("aspectRatio");
+            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
+              if (img.width && img.height) {
+                options.set("aspectRatio", round(img.height / img.width));
+                options.set("height", img.height);
+                options.set("width", img.width);
+              }
+            }
+          });
+        }
+      }
     },
     {
       name: "backgroundSize",

package/src/blocks/image/image.helpers.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+function removeProtocol(path) {
+  return path.replace(/http(s)?:/, "");
+}
+function updateQueryParam(uri = "", key, value) {
+  const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+  const separator = uri.indexOf("?") !== -1 ? "&" : "?";
+  if (uri.match(re)) {
+    return uri.replace(re, "$1" + key + "=" + encodeURIComponent(value) + "$2");
+  }
+  return uri + separator + key + "=" + encodeURIComponent(value);
+}
+function getShopifyImageUrl(src, size) {
+  if (!src || !(src == null ? void 0 : src.match(/cdn\.shopify\.com/)) || !size) {
+    return src;
+  }
+  if (size === "master") {
+    return removeProtocol(src);
+  }
+  const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
+  if (match) {
+    const prefix = src.split(match[0]);
+    const suffix = match[3];
+    const useSize = size.match("x") ? size : `${size}x`;
+    return removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
+  }
+  return null;
+}
+function getSrcSet(url) {
+  if (!url) {
+    return url;
+  }
+  const sizes = [100, 200, 400, 800, 1200, 1600, 2e3];
+  if (url.match(/builder\.io/)) {
+    let srcUrl = url;
+    const widthInSrc = Number(url.split("?width=")[1]);
+    if (!isNaN(widthInSrc)) {
+      srcUrl = `${srcUrl} ${widthInSrc}w`;
+    }
+    return sizes.filter((size) => size !== widthInSrc).map((size) => `${updateQueryParam(url, "width", size)} ${size}w`).concat([srcUrl]).join(", ");
+  }
+  if (url.match(/cdn\.shopify\.com/)) {
+    return sizes.map((size) => [getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(", ");
+  }
+  return url;
+}
+export {
+  getSrcSet
+};

package/src/blocks/symbol/symbol.js

@@ -38,8 +38,8 @@ function Symbol(props) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
-        options: {
-          entry: symbolToUse.entry
+        query: {
+          id: symbolToUse.entry
         }
       }).then((response) => {
         setContent(response);

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

@@ -11,7 +11,8 @@ function BlockStyles(props) {
     return getProcessedBlock({
       block: props.block,
       state: builderContext.state,
-      context: builderContext.context
+      context: builderContext.context,
+      evaluateBindings: true
     });
   }
   function css() {

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,62 @@ 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 itemsArray = evaluate({
+      code: repeat.collection,
+      state: builderContext.state,
+      context: builderContext.context
+    });
+    if (!Array.isArray(itemsArray)) {
+      return void 0;
+    }
+    const collectionName = repeat.collection.split(".").pop();
+    const itemNameToUse = repeat.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;
   }
   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()
     }));
   }
@@ -182,13 +182,13 @@ function RenderContent(props) {
       }
       if (isPreviewing()) {
         if (props.model && previewingModelName() === props.model) {
-          const currentUrl = new URL(location.href);
-          const previewApiKey = currentUrl.searchParams.get("apiKey");
+          const searchParams = new URL(location.href).searchParams;
+          const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
           if (previewApiKey) {
             getContent({
               model: props.model,
               apiKey: previewApiKey,
-              options: getBuilderSearchParams(convertSearchParamsToQueryObject(currentUrl.searchParams))
+              options: getBuilderSearchParams(convertSearchParamsToQueryObject(searchParams))
             }).then((content) => {
               if (content) {
                 setOverrideContent(content);
@@ -228,7 +228,7 @@ function RenderContent(props) {
         return contentState();
       },
       get context() {
-        return context();
+        return contextContext();
       },
       get apiKey() {
         return props.apiKey;

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-block-tag.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View } from "react-native";
-function getBlockTag(block) {
+function getBlockTag(_block) {
   return View;
 }
 export {

package/src/functions/get-content/ab-testing.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+const handleABTesting = (item, testGroups) => {
+  if (item.variations && Object.keys(item.variations).length) {
+    const testGroup = item.id ? testGroups[item.id] : void 0;
+    const variationValue = testGroup ? item.variations[testGroup] : void 0;
+    if (testGroup && variationValue) {
+      item.data = variationValue.data;
+      item.testVariationId = variationValue.id;
+      item.testVariationName = variationValue.name;
+    } else {
+      let n = 0;
+      const random = Math.random();
+      let set = false;
+      for (const id in item.variations) {
+        const variation = item.variations[id];
+        const testRatio = variation.testRatio;
+        n += testRatio;
+        if (random < n) {
+          const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
+          set = true;
+          Object.assign(item, {
+            data: variation.data,
+            testVariationId: variation.id,
+            testVariationName: variationName
+          });
+        }
+      }
+      if (!set) {
+        Object.assign(item, {
+          testVariationId: item.id,
+          testVariationName: "Default"
+        });
+      }
+    }
+  }
+};
+export {
+  handleABTesting
+};

package/src/functions/get-content/index.js

@@ -38,20 +38,10 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+import { flatten } from "../../helpers/flatten.js";
 import { getFetch } from "../get-fetch.js";
+import { handleABTesting } from "./ab-testing.js";
 const fetch$ = getFetch();
-function flatten(object, path = null, separator = ".") {
-  return Object.keys(object).reduce((acc, key) => {
-    const value = object[key];
-    const newPath = [path, key].filter(Boolean).join(separator);
-    const isObject = [
-      typeof value === "object",
-      value !== null,
-      !(Array.isArray(value) && value.length === 0)
-    ].every(Boolean);
-    return isObject ? __spreadValues(__spreadValues({}, acc), flatten(value, newPath, separator)) : __spreadProps(__spreadValues({}, acc), { [newPath]: value });
-  }, {});
-}
 function getContent(options) {
   return __async(this, null, function* () {
     return (yield getAllContent(__spreadProps(__spreadValues({}, options), { limit: 1 }))).results[0] || null;
@@ -84,50 +74,15 @@ const generateContentUrl = (options) => {
   }
   return url;
 };
-const handleABTesting = (content, testGroups) => {
-  for (const item of content.results) {
-    if (item.variations && Object.keys(item.variations).length) {
-      const testGroup = testGroups[item.id];
-      const variationValue = item.variations[testGroup];
-      if (testGroup && variationValue) {
-        item.data = variationValue.data;
-        item.testVariationId = variationValue.id;
-        item.testVariationName = variationValue.name;
-      } else {
-        let n = 0;
-        const random = Math.random();
-        let set = false;
-        for (const id in item.variations) {
-          const variation = item.variations[id];
-          const testRatio = variation.testRatio;
-          n += testRatio;
-          if (random < n) {
-            const variationName = variation.name || (variation.id === item.id ? "Default variation" : "");
-            set = true;
-            Object.assign(item, {
-              data: variation.data,
-              testVariationId: variation.id,
-              testVariationName: variationName
-            });
-          }
-        }
-        if (!set) {
-          Object.assign(item, {
-            testVariationId: item.id,
-            testVariationName: "Default"
-          });
-        }
-      }
-    }
-  }
-};
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
     const fetch = yield fetch$;
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
-      handleABTesting(content, options.testGroups);
+      for (const item of content.results) {
+        handleABTesting(item, options.testGroups);
+      }
     }
     return content;
   });

package/src/functions/get-content/types.js

@@ -0,0 +1 @@
+import * as React from 'react';

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/register-component.js

@@ -30,7 +30,6 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
   components.push(__spreadValues({ component }, info));
@@ -39,31 +38,34 @@ function registerComponent(component, info) {
 }
 const createRegisterComponentMessage = (_a) => {
   var _b = _a, {
-    component
+    component: _
   } = _b, info = __objRest(_b, [
     "component"
   ]);
   return {
     type: "builder.registerComponent",
-    data: prepareComponentInfoToSend(fastClone(info))
+    data: prepareComponentInfoToSend(info)
   };
 };
-function prepareComponentInfoToSend(info) {
-  return __spreadValues(__spreadValues({}, info), info.inputs && {
-    inputs: info.inputs.map((input) => {
-      const keysToConvertFnToString = ["onChange", "showIf"];
-      for (const key of keysToConvertFnToString) {
-        const fn = input[key];
-        if (fn && typeof fn === "function") {
-          input = __spreadProps(__spreadValues({}, input), {
-            [key]: `return (${fn.toString()}).apply(this, arguments)`
-          });
-        }
-      }
-      return input;
-    })
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+const prepareComponentInfoToSend = (_c) => {
+  var _d = _c, {
+    inputs
+  } = _d, info = __objRest(_d, [
+    "inputs"
+  ]);
+  return __spreadProps(__spreadValues({}, fastClone(info)), {
+    inputs: inputs == null ? void 0 : inputs.map((input) => Object.entries(input).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), {
+      [key]: serializeValue(value)
+    }), {}))
   });
-}
+};
 export {
   components,
   createRegisterComponentMessage,

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/flatten.js

@@ -0,0 +1,35 @@
+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;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function flatten(object, path = null, separator = ".") {
+  return Object.keys(object).reduce((acc, key) => {
+    const value = object[key];
+    const newPath = [path, key].filter(Boolean).join(separator);
+    const isObject = [
+      typeof value === "object",
+      value !== null,
+      !(Array.isArray(value) && value.length === 0)
+    ].every(Boolean);
+    return isObject ? __spreadValues(__spreadValues({}, acc), flatten(value, newPath, separator)) : __spreadProps(__spreadValues({}, acc), { [newPath]: value });
+  }, {});
+}
+export {
+  flatten
+};

package/src/functions/fast-clone.js

@@ -1,5 +0,0 @@
-import * as React from 'react';
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
-export {
-  fastClone
-};