@builder.io/sdk-react-native 0.2.2 → 0.3.1

package/dist/blocks/button/button.js

@@ -32,8 +32,9 @@ const react_native_1 = require("react-native");
 function Button(props) {
     return (React.createElement(React.Fragment, null, props.link ? (React.createElement(React.Fragment, null,
         React.createElement(react_native_1.View, { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined },
-            React.createElement(BaseText_1.default, null, props.text)))) : (React.createElement(react_native_1.View, { ...props.attributes, style: styles.view1 },
-        React.createElement(BaseText_1.default, null, props.text)))));
+            React.createElement(BaseText_1.default, null, props.text)))) : (React.createElement(React.Fragment, null,
+        React.createElement(react_native_1.View, { ...props.attributes, style: styles.view1 },
+            React.createElement(BaseText_1.default, null, props.text))))));
 }
 const styles = react_native_1.StyleSheet.create({ view1: { all: "unset" } });
 exports.default = Button;

package/dist/blocks/columns/columns.js

@@ -80,7 +80,7 @@ function Columns(props) {
             };
         }
         const width = getColumnCssWidth(index);
-        const gutterPixels = `${gutterSize}px`;
+        const gutterPixels = `${gutter}px`;
         const mobileWidth = "100%";
         const mobileMarginLeft = 0;
         return {
@@ -111,30 +111,30 @@ function Columns(props) {
     }
     function columnsStyles() {
         return `
-    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir-tablet);
-        align-items: stretch;
-      }
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
 
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-tablet) !important;
-        margin-left: var(--column-margin-left-tablet) !important;
-      }
-    }
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
 
-    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir);
-        align-items: stretch;
-      }
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
 
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-mobile) !important;
-        margin-left: var(--column-margin-left-mobile) !important;
-      }
-    },
-  `;
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
     }
     const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
     return (React.createElement(react_native_1.View, { style: columnsCssVars(), dataSet: {

package/dist/blocks/symbol/symbol.js

@@ -98,7 +98,7 @@ function Symbol(props) {
         } },
         React.createElement(render_content_1.default, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
                 ...(_a = props.symbol) === null || _a === void 0 ? void 0 : _a.data,
-                ...builderContext.state,
+                ...builderContext.localState,
                 ...(_b = contentToUse === null || contentToUse === void 0 ? void 0 : contentToUse.data) === null || _b === void 0 ? void 0 : _b.state,
             }, model: (_c = props.symbol) === null || _c === void 0 ? void 0 : _c.model, content: contentToUse })));
 }

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

@@ -38,7 +38,9 @@ function BlockStyles(props) {
     function useBlock() {
         return (0, get_processed_block_js_1.getProcessedBlock)({
             block: props.block,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             context: props.context.context,
             shouldEvaluateBindings: true,
         });

package/dist/components/render-block/render-block.helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getProxyState = exports.getComponent = void 0;
+exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getComponent = void 0;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -59,7 +59,9 @@ const getComponent = ({ block, context }) => {
     var _a;
     const componentName = (_a = (0, get_processed_block_1.getProcessedBlock)({
         block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: false
     }).component) == null ? void 0 : _a.name;
@@ -85,7 +87,9 @@ const getRepeatItemData = ({ block, context }) => {
     }
     const itemsArray = (0, evaluate_1.evaluate)({
         code: repeat.collection,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context
     });
     if (!Array.isArray(itemsArray)) {
@@ -95,7 +99,7 @@ const getRepeatItemData = ({ block, context }) => {
     const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
     const repeatArray = itemsArray.map((item, index) => ({
         context: __spreadProps(__spreadValues({}, context), {
-            state: __spreadProps(__spreadValues({}, context.state), {
+            localState: __spreadProps(__spreadValues({}, context.localState), {
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
@@ -107,19 +111,3 @@ const getRepeatItemData = ({ block, context }) => {
     return repeatArray;
 };
 exports.getRepeatItemData = getRepeatItemData;
-const getProxyState = (context) => {
-    if (typeof Proxy === "undefined") {
-        console.error("no Proxy available in this environment, cannot proxy state.");
-        return context.state;
-    }
-    const useState = new Proxy(context.state, {
-        set: (obj, prop, value) => {
-            var _a;
-            obj[prop] = value;
-            (_a = context.setState) == null ? void 0 : _a.call(context, obj);
-            return true;
-        }
-    });
-    return useState;
-};
-exports.getProxyState = getProxyState;

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

@@ -41,21 +41,25 @@ const extract_text_styles_js_1 = require("../../functions/extract-text-styles.js
 const render_component_1 = __importDefault(require("./render-component"));
 const get_react_native_block_styles_js_1 = require("../../functions/get-react-native-block-styles.js");
 function RenderBlock(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const [component, setComponent] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getComponent)({
         block: props.block,
         context: props.context,
     }));
-    const [repeatItemData, setRepeatItemData] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getRepeatItemData)({
-        block: props.block,
-        context: props.context,
-    }));
+    function repeatItem() {
+        return (0, render_block_helpers_js_1.getRepeatItemData)({
+            block: props.block,
+            context: props.context,
+        });
+    }
     function useBlock() {
-        return repeatItemData
+        return repeatItem()
             ? props.block
             : (0, get_processed_block_js_1.getProcessedBlock)({
                 block: props.block,
-                state: props.context.state,
+                localState: props.context.localState,
+                rootState: props.context.rootState,
+                rootSetState: props.context.rootSetState,
                 context: props.context.context,
                 shouldEvaluateBindings: true,
             });
@@ -70,11 +74,12 @@ function RenderBlock(props) {
         }
         return true;
     }
-    const [proxyState, setProxyState] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getProxyState)(props.context));
     function actions() {
         return (0, get_block_actions_js_1.getBlockActions)({
             block: useBlock(),
-            state: target_js_1.TARGET === "qwik" ? props.context.state : proxyState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
+            localState: props.context.localState,
             context: props.context.context,
         });
     }
@@ -101,7 +106,7 @@ function RenderBlock(props) {
          * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
          * blocks, and the children will be repeated within those blocks.
          */
-        const shouldRenderChildrenOutsideRef = !(component === null || component === void 0 ? void 0 : component.component) && !repeatItemData;
+        const shouldRenderChildrenOutsideRef = !(component === null || component === void 0 ? void 0 : component.component) && !repeatItem();
         return shouldRenderChildrenOutsideRef ? (_a = useBlock().children) !== null && _a !== void 0 ? _a : [] : [];
     }
     function childrenContext() {
@@ -118,10 +123,11 @@ function RenderBlock(props) {
         return {
             apiKey: props.context.apiKey,
             apiVersion: props.context.apiVersion,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             content: props.context.content,
             context: props.context.context,
-            setState: props.context.setState,
             registeredComponents: props.context.registeredComponents,
             inheritedStyles: getInheritedTextStyles(),
         };
@@ -152,11 +158,12 @@ function RenderBlock(props) {
     return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !(component === null || component === void 0 ? void 0 : component.noWrap) ? (React.createElement(React.Fragment, null,
         (0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) ? (React.createElement(React.Fragment, null,
             React.createElement(react_native_1.View, { ...attributes(), ...actions() }))) : null,
-        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData === null || repeatItemData === void 0 ? void 0 : repeatItemData.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && repeatItem() ? (React.createElement(React.Fragment, null, (_a = repeatItem()) === null || _a === void 0 ? void 0 : _a.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
             React.createElement(react_native_1.View, { ...attributes(), ...actions() },
-                React.createElement(render_component_1.default, { ...renderComponentProps() }), (_a = childrenWithoutParentComponent()) === null || _a === void 0 ? void 0 :
-                _a.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))), (_b = childrenWithoutParentComponent()) === null || _b === void 0 ? void 0 :
-                _b.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(render_component_1.default, { ...renderComponentProps() })))) : null));
+                React.createElement(render_component_1.default, { ...renderComponentProps() }), (_b = childrenWithoutParentComponent()) === null || _b === void 0 ? void 0 :
+                _b.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))), (_c = childrenWithoutParentComponent()) === null || _c === void 0 ? void 0 :
+                _c.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(React.Fragment, null,
+        React.createElement(render_component_1.default, { ...renderComponentProps() }))))) : null));
 }
 exports.default = RenderBlock;

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

@@ -37,7 +37,8 @@ function RenderComponent(props) {
     const ComponentRefRef = props.componentRef;
     return (React.createElement(builder_context_js_1.default.Provider, { value: {
             content: props.context.content,
-            state: props.context.state,
+            rootState: props.context.rootState,
+            localState: props.context.localState,
             context: props.context.context,
             apiKey: props.context.apiKey,
             registeredComponents: props.context.registeredComponents,

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

@@ -34,12 +34,14 @@ const render_block_1 = __importDefault(require("./render-block"));
 function RenderRepeatedBlock(props) {
     return (React.createElement(builder_context_js_1.default.Provider, { value: {
             content: props.repeatContext.content,
-            state: props.repeatContext.state,
-            setState: props.repeatContext.setState,
+            localState: props.repeatContext.localState,
+            rootState: props.repeatContext.rootState,
+            rootSetState: props.repeatContext.rootSetState,
             context: props.repeatContext.context,
             apiKey: props.repeatContext.apiKey,
             registeredComponents: props.repeatContext.registeredComponents,
             inheritedStyles: props.repeatContext.inheritedStyles,
+            apiVersion: props.repeatContext.apiVersion,
         } },
         React.createElement(render_block_1.default, { block: props.block, context: props.repeatContext })));
 }

package/dist/components/render-content/components/render-styles.js

@@ -43,16 +43,16 @@ ${(0, render_styles_helpers_2.getFontCss)({
     })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `);
     return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles });

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

@@ -88,8 +88,8 @@ function RenderContent(props) {
         data: props.data,
         locale: props.locale,
     }));
-    function setContextState(newState) {
-        setContentState(newState);
+    function contentSetState(newRootState) {
+        setContentState(newRootState);
     }
     const [allRegisteredComponents, setAllRegisteredComponents] = (0, react_1.useState)(() => [
         ...(0, builder_registered_components_js_1.getDefaultRegisteredComponents)(),
@@ -148,7 +148,9 @@ function RenderContent(props) {
             (0, evaluate_js_1.evaluate)({
                 code: jsCode,
                 context: props.context || {},
-                state: contentState,
+                localState: undefined,
+                rootState: contentState,
+                rootSetState: contentSetState,
             });
         }
     }
@@ -176,7 +178,9 @@ function RenderContent(props) {
         return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_js_1.evaluate)({
             code: group,
             context: props.context || {},
-            state: contentState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: contentSetState,
         }));
     }
     function handleRequest({ url, key }) {
@@ -187,7 +191,7 @@ function RenderContent(props) {
                 ...contentState,
                 [key]: json,
             };
-            setContextState(newState);
+            contentSetState(newState);
         })
             .catch((err) => {
             console.error("error fetching dynamic data", url, err);
@@ -313,12 +317,14 @@ function RenderContent(props) {
     }, []);
     return (React.createElement(builder_context_js_1.default.Provider, { value: {
             content: useContent,
-            state: contentState,
-            setState: setContextState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: target_js_1.TARGET === "qwik" ? undefined : contentSetState,
             context: props.context || {},
             apiKey: props.apiKey,
             apiVersion: props.apiVersion,
             registeredComponents: allRegisteredComponents,
+            inheritedStyles: {},
         } }, useContent ? (React.createElement(React.Fragment, null,
         React.createElement(react_native_1.ScrollView, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },
             target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,

package/dist/components/render-inlined-styles.js

@@ -28,7 +28,7 @@ const react_native_1 = require("react-native");
 const target_js_1 = require("../constants/target.js");
 function RenderInlinedStyles(props) {
     function tag() {
-        // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+        // NOTE: we have to obfuscate the name of the tag due to a limitation in the svelte-preprocessor plugin.
         // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
         return "sty" + "le";
     }

package/dist/constants/sdk-version.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SDK_VERSION = void 0;
+exports.SDK_VERSION = "0.3.1";

package/dist/context/builder.context.js

@@ -5,9 +5,10 @@ const react_1 = require("react");
 var stdin_default = (0, react_1.createContext)({
     content: null,
     context: {},
-    state: {},
-    setState() {
+    localState: void 0,
+    rootSetState() {
     },
+    rootState: {},
     apiKey: null,
     apiVersion: void 0,
     registeredComponents: {},

package/dist/functions/evaluate.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.evaluate = void 0;
+exports.flattenState = exports.evaluate = void 0;
 const is_browser_js_1 = require("./is-browser.js");
 const is_editing_js_1 = require("./is-editing.js");
-function evaluate({ code, context, state, event, isExpression = true }) {
+function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
     if (code === "") {
         console.warn("Skipping evaluation of empty code block.");
         return;
@@ -16,10 +16,32 @@ function evaluate({ code, context, state, event, isExpression = true }) {
     const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
     const useCode = useReturn ? `return (${code});` : code;
     try {
-        return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+        return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
     }
     catch (e) {
         console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
     }
 }
 exports.evaluate = evaluate;
+function flattenState(rootState, localState, rootSetState) {
+    if (rootState === localState) {
+        throw new Error("rootState === localState");
+    }
+    return new Proxy(rootState, {
+        get: (_, prop) => {
+            if (localState && prop in localState) {
+                return localState[prop];
+            }
+            return rootState[prop];
+        },
+        set: (_, prop, value) => {
+            if (localState && prop in localState) {
+                throw new Error("Writing to local state is not allowed as it is read-only.");
+            }
+            rootState[prop] = value;
+            rootSetState == null ? void 0 : rootSetState(rootState);
+            return true;
+        }
+    });
+}
+exports.flattenState = flattenState;

package/dist/functions/evaluate.test.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const evaluate_1 = require("./evaluate");
+describe("flatten state", () => {
+    it("should behave normally when no PROTO_STATE", () => {
+        const localState = {};
+        const rootState = { foo: "bar" };
+        const flattened = (0, evaluate_1.flattenState)(rootState, localState, void 0);
+        expect(flattened.foo).toEqual("bar");
+        flattened.foo = "baz";
+        expect(rootState.foo).toEqual("baz");
+    });
+    it("should shadow write ", () => {
+        const rootState = { foo: "foo" };
+        const localState = { foo: "baz" };
+        const flattened = (0, evaluate_1.flattenState)(rootState, localState, void 0);
+        expect(() => flattened.foo = "bar").toThrow("Writing to local state is not allowed as it is read-only.");
+    });
+});

package/dist/functions/get-block-actions-handler.js

@@ -5,7 +5,9 @@ const evaluate_js_1 = require("./evaluate.js");
 const createEventHandler = (value, options) => (event) => (0, evaluate_js_1.evaluate)({
     code: value,
     context: options.context,
-    state: options.state,
+    localState: options.localState,
+    rootState: options.rootState,
+    rootSetState: options.rootSetState,
     event,
     isExpression: false
 });

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

@@ -63,7 +63,7 @@ function getAllContent(options) {
             const res = yield (0, get_fetch_js_1.fetch)(url.href);
             const content = yield res.json();
             if ("status" in content && !("results" in content)) {
-                logger_js_1.logger.error("Error fetching data. ", content, options);
+                logger_js_1.logger.error("Error fetching data. ", { url, content, options });
                 return content;
             }
             const canTrack = options.canTrack !== false;

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

@@ -24,7 +24,7 @@ const evaluate_js_1 = require("./evaluate.js");
 const fast_clone_js_1 = require("./fast-clone.js");
 const set_js_1 = require("./set.js");
 const transform_block_js_1 = require("./transform-block.js");
-const evaluateBindings = ({ block, context, state }) => {
+const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
     if (!block.bindings) {
         return block;
     }
@@ -35,15 +35,27 @@ const evaluateBindings = ({ block, context, state }) => {
     });
     for (const binding in block.bindings) {
         const expression = block.bindings[binding];
-        const value = (0, evaluate_js_1.evaluate)({ code: expression, state, context });
+        const value = (0, evaluate_js_1.evaluate)({
+            code: expression,
+            localState,
+            rootState,
+            rootSetState,
+            context
+        });
         (0, set_js_1.set)(copied, binding, value);
     }
     return copied;
 };
-function getProcessedBlock({ block, context, shouldEvaluateBindings, state }) {
+function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
     const transformedBlock = (0, transform_block_js_1.transformBlock)(block);
     if (shouldEvaluateBindings) {
-        return evaluateBindings({ block: transformedBlock, state, context });
+        return evaluateBindings({
+            block: transformedBlock,
+            localState,
+            rootState,
+            rootSetState,
+            context
+        });
     }
     else {
         return transformedBlock;

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

@@ -22,7 +22,9 @@ test("Can process bindings", () => {
     const processed = (0, get_processed_block_js_1.getProcessedBlock)({
         block,
         context: {},
-        state: { test: "hello" },
+        rootState: { test: "hello" },
+        rootSetState: void 0,
+        localState: void 0,
         shouldEvaluateBindings: true
     });
     expect(processed).not.toEqual(block);

package/dist/scripts/init-editing.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupBrowserForEditing = exports.registerInsertMenu = void 0;
+const sdk_version_js_1 = require("../constants/sdk-version.js");
 const target_js_1 = require("../constants/target.js");
 const is_browser_js_1 = require("../functions/is-browser.js");
 const register_js_1 = require("../functions/register.js");
@@ -35,6 +36,7 @@ const setupBrowserForEditing = (options = {}) => {
             type: "builder.sdkInfo",
             data: {
                 target: target_js_1.TARGET,
+                version: sdk_version_js_1.SDK_VERSION,
                 supportsPatchUpdates: false,
                 supportsAddBlockScoping: true,
                 supportsCustomBreakpoints: true

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,10 +13,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc",
-    "release:patch": "yarn run build && npm version patch && npm publish",
-    "release:minor": "yarn run build && npm version minor && npm publish",
-    "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
+    "build": "tsc"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.10",

package/src/blocks/button/button.jsx

@@ -24,9 +24,11 @@ function Button(props) {
           </View>
         </>
       ) : (
-        <View {...props.attributes} style={styles.view1}>
-          <BaseText>{props.text}</BaseText>
-        </View>
+        <>
+          <View {...props.attributes} style={styles.view1}>
+            <BaseText>{props.text}</BaseText>
+          </View>
+        </>
       )}
     </>
   );

package/src/blocks/columns/columns.jsx

@@ -73,7 +73,7 @@ function Columns(props) {
       };
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {
@@ -107,30 +107,30 @@ function Columns(props) {
 
   function columnsStyles() {
     return `
-    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir-tablet);
-        align-items: stretch;
-      }
-
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-tablet) !important;
-        margin-left: var(--column-margin-left-tablet) !important;
-      }
-    }
-
-    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-      .${props.builderBlock.id}-breakpoints {
-        flex-direction: var(--flex-dir);
-        align-items: stretch;
-      }
-
-      .${props.builderBlock.id}-breakpoints > .builder-column {
-        width: var(--column-width-mobile) !important;
-        margin-left: var(--column-margin-left-mobile) !important;
-      }
-    },
-  `;
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
   }
 
   const builderContext = useContext(BuilderContext);

package/src/blocks/symbol/symbol.jsx

@@ -91,7 +91,7 @@ function Symbol(props) {
         customComponents={Object.values(builderContext.registeredComponents)}
         data={{
           ...props.symbol?.data,
-          ...builderContext.state,
+          ...builderContext.localState,
           ...contentToUse?.data?.state,
         }}
         model={props.symbol?.model}

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

@@ -21,7 +21,9 @@ function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       context: props.context.context,
       shouldEvaluateBindings: true,
     });

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

@@ -58,7 +58,9 @@ const getComponent = ({
   var _a;
   const componentName = (_a = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false
   }).component) == null ? void 0 : _a.name;
@@ -85,7 +87,9 @@ const getRepeatItemData = ({
   }
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context
   });
   if (!Array.isArray(itemsArray)) {
@@ -95,7 +99,7 @@ const getRepeatItemData = ({
   const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
   const repeatArray = itemsArray.map((item, index) => ({
     context: __spreadProps(__spreadValues({}, context), {
-      state: __spreadProps(__spreadValues({}, context.state), {
+      localState: __spreadProps(__spreadValues({}, context.localState), {
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -106,24 +110,8 @@ const getRepeatItemData = ({
   }));
   return repeatArray;
 };
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      var _a;
-      obj[prop] = value;
-      (_a = context.setState) == null ? void 0 : _a.call(context, obj);
-      return true;
-    }
-  });
-  return useState;
-};
 export {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement
 };

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

@@ -15,7 +15,6 @@ import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
 import {
   getComponent,
-  getProxyState,
   getRepeatItemData,
   isEmptyHtmlElement,
 } from "./render-block.helpers.js";
@@ -33,19 +32,21 @@ function RenderBlock(props) {
     })
   );
 
-  const [repeatItemData, setRepeatItemData] = useState(() =>
-    getRepeatItemData({
+  function repeatItem() {
+    return getRepeatItemData({
       block: props.block,
       context: props.context,
-    })
-  );
+    });
+  }
 
   function useBlock() {
-    return repeatItemData
+    return repeatItem()
       ? props.block
       : getProcessedBlock({
           block: props.block,
-          state: props.context.state,
+          localState: props.context.localState,
+          rootState: props.context.rootState,
+          rootSetState: props.context.rootSetState,
           context: props.context.context,
           shouldEvaluateBindings: true,
         });
@@ -63,14 +64,12 @@ function RenderBlock(props) {
     return true;
   }
 
-  const [proxyState, setProxyState] = useState(() =>
-    getProxyState(props.context)
-  );
-
   function actions() {
     return getBlockActions({
       block: useBlock(),
-      state: TARGET === "qwik" ? props.context.state : proxyState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
+      localState: props.context.localState,
       context: props.context.context,
     });
   }
@@ -99,7 +98,7 @@ function RenderBlock(props) {
      * blocks, and the children will be repeated within those blocks.
      */
     const shouldRenderChildrenOutsideRef =
-      !component?.component && !repeatItemData;
+      !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
@@ -119,10 +118,11 @@ function RenderBlock(props) {
     return {
       apiKey: props.context.apiKey,
       apiVersion: props.context.apiVersion,
-      state: props.context.state,
+      localState: props.context.localState,
+      rootState: props.context.rootState,
+      rootSetState: props.context.rootSetState,
       content: props.context.content,
       context: props.context.context,
-      setState: props.context.setState,
       registeredComponents: props.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };
@@ -162,9 +162,9 @@ function RenderBlock(props) {
                   <View {...attributes()} {...actions()} />
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag) && repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && repeatItem() ? (
                 <>
-                  {repeatItemData?.map((data, index) => (
+                  {repeatItem()?.map((data, index) => (
                     <RenderRepeatedBlock
                       key={index}
                       repeatContext={data.context}
@@ -173,7 +173,7 @@ function RenderBlock(props) {
                   ))}
                 </>
               ) : null}
-              {!isEmptyHtmlElement(tag) && !repeatItemData ? (
+              {!isEmptyHtmlElement(tag) && !repeatItem() ? (
                 <>
                   <View {...attributes()} {...actions()}>
                     <RenderComponent {...renderComponentProps()} />
@@ -198,7 +198,9 @@ function RenderBlock(props) {
               ) : null}
             </>
           ) : (
-            <RenderComponent {...renderComponentProps()} />
+            <>
+              <RenderComponent {...renderComponentProps()} />
+            </>
           )}
         </>
       ) : null}

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

@@ -19,7 +19,8 @@ function RenderComponent(props) {
     <BuilderContext.Provider
       value={{
         content: props.context.content,
-        state: props.context.state,
+        rootState: props.context.rootState,
+        localState: props.context.localState,
         context: props.context.context,
         apiKey: props.context.apiKey,
         registeredComponents: props.context.registeredComponents,

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

@@ -16,12 +16,14 @@ function RenderRepeatedBlock(props) {
     <BuilderContext.Provider
       value={{
         content: props.repeatContext.content,
-        state: props.repeatContext.state,
-        setState: props.repeatContext.setState,
+        localState: props.repeatContext.localState,
+        rootState: props.repeatContext.rootState,
+        rootSetState: props.repeatContext.rootSetState,
         context: props.repeatContext.context,
         apiKey: props.repeatContext.apiKey,
         registeredComponents: props.repeatContext.registeredComponents,
         inheritedStyles: props.repeatContext.inheritedStyles,
+        apiVersion: props.repeatContext.apiVersion,
       }}
     >
       <RenderBlock block={props.block} context={props.repeatContext} />

package/src/components/render-content/components/render-styles.jsx

@@ -24,16 +24,16 @@ ${getFontCss({
 })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `
   );

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

@@ -90,8 +90,8 @@ function RenderContent(props) {
     })
   );
 
-  function setContextState(newState) {
-    setContentState(newState);
+  function contentSetState(newRootState) {
+    setContentState(newRootState);
   }
 
   const [allRegisteredComponents, setAllRegisteredComponents] = useState(() =>
@@ -159,7 +159,9 @@ function RenderContent(props) {
       evaluate({
         code: jsCode,
         context: props.context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       });
     }
   }
@@ -192,7 +194,9 @@ function RenderContent(props) {
       evaluate({
         code: group,
         context: props.context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
       })
     );
   }
@@ -205,7 +209,7 @@ function RenderContent(props) {
           ...contentState,
           [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -356,12 +360,14 @@ function RenderContent(props) {
     <builderContext.Provider
       value={{
         content: useContent,
-        state: contentState,
-        setState: setContextState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: TARGET === "qwik" ? undefined : contentSetState,
         context: props.context || {},
         apiKey: props.apiKey,
         apiVersion: props.apiVersion,
         registeredComponents: allRegisteredComponents,
+        inheritedStyles: {},
       }}
     >
       {useContent ? (

package/src/components/render-inlined-styles.jsx

@@ -11,7 +11,7 @@ import { TARGET } from "../constants/target.js";
 
 function RenderInlinedStyles(props) {
   function tag() {
-    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // NOTE: we have to obfuscate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
   }

package/src/constants/sdk-version.js

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.3.1"

package/src/context/builder.context.js

@@ -2,9 +2,10 @@ import { createContext } from "react";
 var stdin_default = createContext({
   content: null,
   context: {},
-  state: {},
-  setState() {
+  localState: void 0,
+  rootSetState() {
   },
+  rootState: {},
   apiKey: null,
   apiVersion: void 0,
   registeredComponents: {},

package/src/functions/evaluate.js

@@ -3,7 +3,9 @@ import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,
-  state,
+  localState,
+  rootState,
+  rootSetState,
   event,
   isExpression = true
 }) {
@@ -19,11 +21,33 @@ function evaluate({
   const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
   } catch (e) {
     console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
   }
 }
+function flattenState(rootState, localState, rootSetState) {
+  if (rootState === localState) {
+    throw new Error("rootState === localState");
+  }
+  return new Proxy(rootState, {
+    get: (_, prop) => {
+      if (localState && prop in localState) {
+        return localState[prop];
+      }
+      return rootState[prop];
+    },
+    set: (_, prop, value) => {
+      if (localState && prop in localState) {
+        throw new Error("Writing to local state is not allowed as it is read-only.");
+      }
+      rootState[prop] = value;
+      rootSetState == null ? void 0 : rootSetState(rootState);
+      return true;
+    }
+  });
+}
 export {
-  evaluate
+  evaluate,
+  flattenState
 };

package/src/functions/evaluate.test.js

@@ -0,0 +1,17 @@
+import { flattenState } from "./evaluate";
+describe("flatten state", () => {
+  it("should behave normally when no PROTO_STATE", () => {
+    const localState = {};
+    const rootState = { foo: "bar" };
+    const flattened = flattenState(rootState, localState, void 0);
+    expect(flattened.foo).toEqual("bar");
+    flattened.foo = "baz";
+    expect(rootState.foo).toEqual("baz");
+  });
+  it("should shadow write ", () => {
+    const rootState = { foo: "foo" };
+    const localState = { foo: "baz" };
+    const flattened = flattenState(rootState, localState, void 0);
+    expect(() => flattened.foo = "bar").toThrow("Writing to local state is not allowed as it is read-only.");
+  });
+});

package/src/functions/get-block-actions-handler.js

@@ -2,7 +2,9 @@ import { evaluate } from "./evaluate.js";
 const createEventHandler = (value, options) => (event) => evaluate({
   code: value,
   context: options.context,
-  state: options.state,
+  localState: options.localState,
+  rootState: options.rootState,
+  rootSetState: options.rootSetState,
   event,
   isExpression: false
 });

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

@@ -57,7 +57,7 @@ function getAllContent(options) {
       const res = yield fetch(url.href);
       const content = yield res.json();
       if ("status" in content && !("results" in content)) {
-        logger.error("Error fetching data. ", content, options);
+        logger.error("Error fetching data. ", { url, content, options });
         return content;
       }
       const canTrack = options.canTrack !== false;

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

@@ -24,7 +24,9 @@ import { transformBlock } from "./transform-block.js";
 const evaluateBindings = ({
   block,
   context,
-  state
+  localState,
+  rootState,
+  rootSetState
 }) => {
   if (!block.bindings) {
     return block;
@@ -36,7 +38,13 @@ const evaluateBindings = ({
   });
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
-    const value = evaluate({ code: expression, state, context });
+    const value = evaluate({
+      code: expression,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
     set(copied, binding, value);
   }
   return copied;
@@ -45,11 +53,19 @@ function getProcessedBlock({
   block,
   context,
   shouldEvaluateBindings,
-  state
+  localState,
+  rootState,
+  rootSetState
 }) {
   const transformedBlock = transformBlock(block);
   if (shouldEvaluateBindings) {
-    return evaluateBindings({ block: transformedBlock, state, context });
+    return evaluateBindings({
+      block: transformedBlock,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
   } else {
     return transformedBlock;
   }

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

@@ -20,7 +20,9 @@ test("Can process bindings", () => {
   const processed = getProcessedBlock({
     block,
     context: {},
-    state: { test: "hello" },
+    rootState: { test: "hello" },
+    rootSetState: void 0,
+    localState: void 0,
     shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);

package/src/scripts/init-editing.js

@@ -1,3 +1,4 @@
+import { SDK_VERSION } from "../constants/sdk-version.js";
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
 import { register } from "../functions/register.js";
@@ -31,6 +32,7 @@ const setupBrowserForEditing = (options = {}) => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
+        version: SDK_VERSION,
         supportsPatchUpdates: false,
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true