@builder.io/sdk-react-native 0.0.9 → 0.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "src/index.js",
   "files": [
     "src"
@@ -17,10 +17,12 @@
     "react-native-video": "^5.1.1"
   },
   "peerDependencies": {
-    "react-native": "^0.64.3"
+    "react-native": "^0.64.3",
+    "react-native-url-polyfill": "^1.3.0"
   },
   "devDependencies": {
     "@types/react-native-video": "^5.0.9",
-    "react-native": "^0.64.3"
+    "react-native": "^0.64.3",
+    "react-native-url-polyfill": "^1.3.0"
   }
 }

package/src/blocks/columns/columns.js

@@ -51,7 +51,7 @@ function Columns(props) {
     blocks: markMutable(column.blocks),
     path: `component.options.columns.${index}.blocks`,
     parent: props.builderBlock.id,
-    style: {
+    styleProp: {
       flexGrow: "1"
     }
   }))));

package/src/blocks/symbol/symbol.js

@@ -27,15 +27,15 @@ import { markMutable } from "../../functions/mark-mutable";
 function Symbol(props) {
   var _a, _b, _c, _d, _e;
   const [className, setClassName] = useState(() => "builder-symbol");
-  const [content, setContent] = useState(() => null);
-  const builderContext = useContext(BuilderContext);
-  useEffect(() => {
+  const [fetchedContent, setFetchedContent] = useState(() => null);
+  function contentToUse() {
     var _a2;
-    setContent((_a2 = props.symbol) == null ? void 0 : _a2.content);
-  }, []);
+    return ((_a2 = props.symbol) == null ? void 0 : _a2.content) || fetchedContent;
+  }
+  const builderContext = useContext(BuilderContext);
   useEffect(() => {
     const symbolToUse = props.symbol;
-    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+    if (symbolToUse && !symbolToUse.content && !fetchedContent && symbolToUse.model) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
@@ -43,10 +43,10 @@ function Symbol(props) {
           id: symbolToUse.entry
         }
       }).then((response) => {
-        setContent(response);
+        setFetchedContent(response);
       });
     }
-  }, [props.symbol, content]);
+  }, [props.symbol, fetchedContent]);
   return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
     dataSet: {
       class: className
@@ -57,7 +57,7 @@ function Symbol(props) {
     customComponents: markMutable(Object.values(builderContext.registeredComponents)),
     data: markMutable(__spreadValues(__spreadValues(__spreadValues({}, (_a = props.symbol) == null ? void 0 : _a.data), builderContext.state), (_d = (_c = (_b = props.symbol) == null ? void 0 : _b.content) == null ? void 0 : _c.data) == null ? void 0 : _d.state)),
     model: (_e = props.symbol) == null ? void 0 : _e.model,
-    content: markMutable(content)
+    content: markMutable(contentToUse())
   }));
 }
 export {

package/src/blocks/video/video.js

@@ -34,7 +34,10 @@ function Video(props) {
       playsInline: true
     } : {});
   }
-  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, videoProps()), {
+  function spreadProps() {
+    return __spreadValues(__spreadValues({}, props.attributes), videoProps());
+  }
+  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, spreadProps()), {
     style: __spreadProps(__spreadValues({
       width: "100%",
       height: "100%"

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

@@ -30,12 +30,10 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import { View } from "react-native";
 import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 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";
@@ -46,8 +44,9 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponentWithContext from "./render-component-with-context.js";
 import RenderComponent from "./render-component.js";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 function RenderBlock(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   function component() {
     var _a2;
     const componentName = (_a2 = getProcessedBlock({
@@ -81,16 +80,16 @@ function RenderBlock(props) {
     });
   }
   function attributes() {
-    return __spreadProps(__spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
+    return __spreadValues(__spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
       block: useBlock(),
       state: props.context.state,
       context: props.context.context
-    })), {
-      style: getBlockStyles({
+    })), TARGET === "reactNative" ? {
+      style: getReactNativeBlockStyles({
         block: useBlock(),
         context: props.context
       })
-    });
+    } : {});
   }
   function shouldWrap() {
     var _a2;
@@ -148,7 +147,7 @@ function RenderBlock(props) {
     if (TARGET !== "reactNative") {
       return {};
     }
-    const styles = getBlockStyles({
+    const styles = getReactNativeBlockStyles({
       block: useBlock(),
       context: props.context
     });
@@ -176,19 +175,15 @@ function RenderBlock(props) {
   const [componentInfo, setComponentInfo] = useState(() => null);
   const RenderComponentTagRef = renderComponentTag();
   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()))) : null, !isEmptyHtmlElement(tagName()) && TARGET === "vue2" && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
-    key: index,
-    repeatContext: data.context,
-    block: data.block
-  })))) : null, !isEmptyHtmlElement(tagName()) && TARGET !== "vue2" && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = repeatItemData()) == null ? void 0 : _b.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
+  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()))) : null, !isEmptyHtmlElement(tagName()) && 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
-  }))) : null, !isEmptyHtmlElement(tagName()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }))) : null, !isEmptyHtmlElement(tagName()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
     block: child,
     context: childrenContext()
-  })), (_d = childrenWithoutParentComponent()) == null ? void 0 : _d.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,
     context: childrenContext()

package/src/components/render-block/render-component-with-context.js

@@ -1,19 +1,3 @@
-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 BuilderContext from "../../context/builder.context.js";
 import RenderComponent from "./render-component.js";
@@ -39,7 +23,12 @@ function RenderComponentWithContext(props) {
         return props.context.inheritedStyles;
       }
     }
-  }, /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, props)));
+  }, /* @__PURE__ */ React.createElement(RenderComponent, {
+    componentRef: props.componentRef,
+    componentOptions: props.componentOptions,
+    blockChildren: props.blockChildren,
+    context: props.context
+  }));
 }
 export {
   RenderComponentWithContext as default

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

@@ -74,7 +74,9 @@ function RenderContent(props) {
       ...components,
       ...props.customComponents || []
     ];
-    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), { [curr.name]: curr }), {});
+    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), {
+      [curr.name]: curr
+    }), {});
     return allComponents;
   }
   function processMessage(event) {
@@ -131,7 +133,9 @@ function RenderContent(props) {
   }
   function handleRequest({ url, key }) {
     getFetch().then((fetch) => fetch(url)).then((response) => response.json()).then((json) => {
-      const newOverrideState = __spreadProps(__spreadValues({}, overrideState), { [key]: json });
+      const newOverrideState = __spreadProps(__spreadValues({}, overrideState), {
+        [key]: json
+      });
       setOverrideState(newOverrideState);
     }).catch((err) => {
       console.log("error fetching dynamic data", url, err);
@@ -248,7 +252,8 @@ function RenderContent(props) {
   }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
     ref: elementRef,
     onClick: (event) => onClick(event),
-    "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id
+    "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id,
+    "builder-model": props.model
   }, shouldRenderContentStyles() ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
     cssCode: (_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.cssCode,
     customFonts: (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.customFonts

package/src/functions/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

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

@@ -18,6 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { evaluate } from "./evaluate.js";
+import { fastClone } from "./fast-clone.js";
 import { set } from "./set.js";
 import { transformBlock } from "./transform-block.js";
 const evaluateBindings = ({
@@ -28,9 +29,10 @@ const evaluateBindings = ({
   if (!block.bindings) {
     return block;
   }
-  const copied = __spreadProps(__spreadValues({}, block), {
-    properties: __spreadValues({}, block.properties),
-    actions: __spreadValues({}, block.actions)
+  const copy = fastClone(block);
+  const copied = __spreadProps(__spreadValues({}, copy), {
+    properties: __spreadValues({}, copy.properties),
+    actions: __spreadValues({}, copy.actions)
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];

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

@@ -0,0 +1,32 @@
+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 { sanitizeReactNativeBlockStyles } from "./sanitize-react-native-block-styles.js";
+function getReactNativeBlockStyles({
+  block,
+  context
+}) {
+  const responsiveStyles = block.responsiveStyles;
+  if (!responsiveStyles) {
+    return {};
+  }
+  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {});
+  const newStyles = sanitizeReactNativeBlockStyles(styles);
+  return newStyles;
+}
+export {
+  getReactNativeBlockStyles
+};

package/src/functions/register-component.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
   components.push(__spreadValues({ component }, info));
@@ -46,7 +47,6 @@ const createRegisterComponentMessage = (_a) => {
     data: prepareComponentInfoToSend(info)
   };
 };
-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();

package/src/functions/{sanitize-styles.js → sanitize-react-native-block-styles.js}

@@ -29,7 +29,7 @@ const normalizeNumber = (value) => {
     return value;
   }
 };
-const sanitizeBlockStyles = (styles) => {
+const sanitizeReactNativeBlockStyles = (styles) => {
   return Object.keys(styles).reduce((acc, key) => {
     const propertyValue = styles[key];
     if (key === "display" && !displayValues.has(propertyValue)) {
@@ -62,5 +62,5 @@ const sanitizeBlockStyles = (styles) => {
   }, {});
 };
 export {
-  sanitizeBlockStyles
+  sanitizeReactNativeBlockStyles
 };

package/src/scripts/init-editing.js

@@ -26,48 +26,50 @@ const setupBrowserForEditing = () => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
-        supportsPatchUpdates: false
+        supportsPatchUpdates: false,
+        supportsAddBlockScoping: true
       }
     }, "*");
     window.addEventListener("message", ({ data }) => {
       var _a2, _b;
-      if (data) {
-        switch (data.type) {
-          case "builder.evaluate": {
-            const text = data.data.text;
-            const args = data.data.arguments || [];
-            const id = data.data.id;
-            const fn = new Function(text);
-            let result;
-            let error = null;
-            try {
-              result = fn.apply(null, args);
-            } catch (err) {
-              error = err;
-            }
-            if (error) {
-              (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
-                type: "builder.evaluateError",
-                data: { id, error: error.message }
-              }, "*");
-            } else {
-              if (result && typeof result.then === "function") {
-                result.then((finalResult) => {
-                  var _a3;
-                  (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
-                    type: "builder.evaluateResult",
-                    data: { id, result: finalResult }
-                  }, "*");
-                }).catch(console.error);
-              } else {
-                (_b = window.parent) == null ? void 0 : _b.postMessage({
+      if (!(data == null ? void 0 : data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "builder.evaluate": {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          const fn = new Function(text);
+          let result;
+          let error = null;
+          try {
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err;
+          }
+          if (error) {
+            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+              type: "builder.evaluateError",
+              data: { id, error: error.message }
+            }, "*");
+          } else {
+            if (result && typeof result.then === "function") {
+              result.then((finalResult) => {
+                var _a3;
+                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
                   type: "builder.evaluateResult",
-                  data: { result, id }
+                  data: { id, result: finalResult }
                 }, "*");
-              }
+              }).catch(console.error);
+            } else {
+              (_b = window.parent) == null ? void 0 : _b.postMessage({
+                type: "builder.evaluateResult",
+                data: { result, id }
+              }, "*");
             }
-            break;
           }
+          break;
         }
       }
     });

package/src/functions/convert-style-object.js

@@ -1,6 +0,0 @@
-const convertStyleObject = (obj) => {
-  return obj;
-};
-export {
-  convertStyleObject
-};

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

@@ -1,50 +0,0 @@
-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 { 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";
-const getStyleForTarget = ({
-  styles,
-  context
-}) => {
-  switch (TARGET) {
-    case "reactNative": {
-      return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), 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)
-      } : {});
-  }
-};
-function getBlockStyles({
-  block,
-  context
-}) {
-  if (!block.responsiveStyles) {
-    return {};
-  }
-  const styles = getStyleForTarget({ styles: block.responsiveStyles, context });
-  const newStyles = sanitizeBlockStyles(styles);
-  return newStyles;
-}
-export {
-  getBlockStyles
-};