@builder.io/sdk-react-native 0.0.12 → 0.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "main": "src/index.js",
   "files": [
     "src"

package/src/blocks/columns/columns.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import RenderBlocks from "../../components/render-blocks.js";
-import { markMutable } from "../../functions/mark-mutable";
 function Columns(props) {
   var _a;
   function getGutterSize() {
@@ -48,7 +47,7 @@ function Columns(props) {
     style: styles.view2,
     key: index
   }, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: markMutable(column.blocks),
+    blocks: column.blocks,
     path: `component.options.columns.${index}.blocks`,
     parent: props.builderBlock.id,
     styleProp: {

package/src/blocks/symbol/symbol.js

@@ -23,7 +23,6 @@ import { useState, useContext, useEffect } from "react";
 import RenderContent from "../../components/render-content/render-content.js";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
-import { markMutable } from "../../functions/mark-mutable";
 function Symbol(props) {
   var _a, _b, _c, _d, _e;
   const [className, setClassName] = useState(() => "builder-symbol");
@@ -54,10 +53,10 @@ function Symbol(props) {
   }), /* @__PURE__ */ React.createElement(RenderContent, {
     apiKey: builderContext.apiKey,
     context: builderContext.context,
-    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)),
+    customComponents: Object.values(builderContext.registeredComponents),
+    data: __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(contentToUse())
+    content: contentToUse()
   }));
 }
 export {

package/src/blocks/text/text.js

@@ -16,6 +16,7 @@ var __spreadValues = (a, b) => {
 };
 import * as React from "react";
 import HTML from "react-native-render-html";
+import BuilderContext from "../../context/builder.context";
 function camelToKebabCase(string) {
   return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 }
@@ -39,8 +40,8 @@ function getBlockStyles(block) {
   }
   return styles;
 }
-function getCss(block) {
-  const styleObject = pick(getBlockStyles(block), PICK_STYLES);
+function getCss(block, inheritedStyles) {
+  const styleObject = __spreadValues(__spreadValues({}, inheritedStyles), pick(getBlockStyles(block), PICK_STYLES));
   if (!styleObject) {
     return "";
   }
@@ -54,9 +55,10 @@ function getCss(block) {
   return str;
 }
 function Text(props) {
+  const builderContext = React.useContext(BuilderContext);
   return /* @__PURE__ */ React.createElement(HTML, {
     source: {
-      html: `<div style="${getCss(props.builderBlock)}">${props.text || ""}</div>`
+      html: `<div style="${getCss(props.builderBlock, builderContext.inheritedStyles)}">${props.text || ""}</div>`
     }
   });
 }

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

@@ -1,5 +1,8 @@
 import * as React from "react";
-import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints
+} from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
@@ -14,7 +17,10 @@ function BlockStyles(props) {
     });
   }
   function css() {
+    var _a;
     const styles = useBlock().responsiveStyles;
+    const content = props.context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(((_a = content == null ? void 0 : content.meta) == null ? void 0 : _a.breakpoints) || {});
     const largeStyles = styles == null ? void 0 : styles.large;
     const mediumStyles = styles == null ? void 0 : styles.medium;
     const smallStyles = styles == null ? void 0 : styles.small;
@@ -26,12 +32,12 @@ function BlockStyles(props) {
     const mediumStylesClass = mediumStyles ? createCssClass({
       className,
       styles: mediumStyles,
-      mediaQuery: getMaxWidthQueryForSize("medium")
+      mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
     }) : "";
     const smallStylesClass = smallStyles ? createCssClass({
       className,
       styles: smallStyles,
-      mediaQuery: getMaxWidthQueryForSize("small")
+      mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }

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

@@ -17,11 +17,10 @@ var __spreadValues = (a, b) => {
 import * as React from "react";
 import BlockStyles from "./block-styles.js";
 import RenderBlock from "./render-block.js";
-import { markPropsMutable } from "../../functions/mark-mutable.js";
 function RenderComponent(props) {
   var _a, _b;
   const ComponentRefRef = props.componentRef;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, markPropsMutable(props.componentOptions)), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, props.componentOptions), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
     block: child,
     context: props.context

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

@@ -40,7 +40,6 @@ import {
   registerInsertMenu,
   setupBrowserForEditing
 } from "../../scripts/init-editing.js";
-import { markMutable } from "../../functions/mark-mutable.js";
 function RenderContent(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const elementRef = useRef(null);
@@ -264,7 +263,7 @@ function RenderContent(props) {
     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
   }) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: markMutable((_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks),
+    blocks: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks,
     key: forceReRenderCount
   }))) : null);
 }

package/src/constants/device-sizes.js

@@ -1,3 +1,4 @@
+import { fastClone } from "../functions/fast-clone";
 const SIZES = {
   small: {
     min: 320,
@@ -15,7 +16,33 @@ const SIZES = {
     max: 1200
   }
 };
-const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
+const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+const getSizesForBreakpoints = ({ small, medium }) => {
+  const newSizes = fastClone(SIZES);
+  if (!small || !medium) {
+    return newSizes;
+  }
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1
+  };
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1
+  };
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2e3,
+    min: largeMin,
+    default: largeMin + 1
+  };
+  return newSizes;
+};
 export {
-  getMaxWidthQueryForSize
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints
 };

package/src/scripts/init-editing.js

@@ -32,7 +32,8 @@ const setupBrowserForEditing = () => {
       data: {
         target: TARGET,
         supportsPatchUpdates: false,
-        supportsAddBlockScoping: true
+        supportsAddBlockScoping: true,
+        supportsCustomBreakpoints: true
       }
     }, "*");
     window.addEventListener("message", ({ data }) => {