@builder.io/sdk-react-native 0.1.4 → 0.1.6

package/dist/blocks/button/component-info.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
 const componentInfo = {
     name: "Core:Button",
-    builtIn: true,
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
     defaultStyles: {
         appearance: "none",

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

@@ -4,7 +4,6 @@ exports.componentInfo = void 0;
 const util_js_1 = require("../util.js");
 const componentInfo = {
     name: "Columns",
-    builtIn: true,
     inputs: [
         {
             name: "columns",

package/dist/blocks/custom-code/component-info.js

@@ -4,7 +4,6 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Custom Code",
     static: true,
-    builtIn: true,
     requiredPermissions: ["editCode"],
     inputs: [
         {

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

@@ -5,7 +5,6 @@ const util_js_1 = require("../util.js");
 const componentInfo = {
     name: "Embed",
     static: true,
-    builtIn: true,
     inputs: [
         {
             name: "url",

package/dist/blocks/form/component-info.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
 const componentInfo = {
     name: "Form:Form",
-    builtIn: true,
     defaults: {
         responsiveStyles: {
             large: {

package/dist/blocks/fragment/component-info.js

@@ -5,7 +5,6 @@ const componentInfo = {
     name: "Fragment",
     static: true,
     hidden: true,
-    builtIn: true,
     canHaveChildren: true,
     noWrap: true
 };

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

@@ -5,7 +5,6 @@ const util_js_1 = require("../util.js");
 const componentInfo = {
     name: "Image",
     static: true,
-    builtIn: true,
     image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
     defaultStyles: {
         position: "relative",

package/dist/blocks/img/component-info.js

@@ -4,7 +4,6 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Raw:Img",
     hideFromInsertMenu: true,
-    builtIn: true,
     image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
     inputs: [
         {

package/dist/blocks/input/component-info.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
 const componentInfo = {
     name: "Form:Input",
-    builtIn: true,
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
     inputs: [
         {

package/dist/blocks/raw-text/component-info.js

@@ -4,7 +4,6 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Builder:RawText",
     hideFromInsertMenu: true,
-    builtIn: true,
     inputs: [
         {
             name: "text",

package/dist/blocks/section/component-info.js

@@ -4,7 +4,6 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Core:Section",
     static: true,
-    builtIn: true,
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
     inputs: [
         {

package/dist/blocks/select/component-info.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
 const componentInfo = {
     name: "Form:Select",
-    builtIn: true,
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045",
     defaultStyles: {
         alignSelf: "flex-start"

package/dist/blocks/submit-button/component-info.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
 const componentInfo = {
     name: "Form:SubmitButton",
-    builtIn: true,
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
     defaultStyles: {
         appearance: "none",

package/dist/blocks/symbol/component-info.js

@@ -5,7 +5,6 @@ const componentInfo = {
     name: "Symbol",
     noWrap: true,
     static: true,
-    builtIn: true,
     inputs: [
         {
             name: "symbol",

package/dist/blocks/text/component-info.js

@@ -4,7 +4,6 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Text",
     static: true,
-    builtIn: true,
     image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
     inputs: [
         {

package/dist/blocks/textarea/component-info.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentInfo = void 0;
 const componentInfo = {
     name: "Form:TextArea",
-    builtIn: true,
     image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
     inputs: [
         {

package/dist/blocks/video/component-info.js

@@ -4,7 +4,6 @@ exports.componentInfo = void 0;
 const componentInfo = {
     name: "Video",
     canHaveChildren: true,
-    builtIn: true,
     defaultStyles: {
         minHeight: "20px",
         minWidth: "20px"

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

@@ -60,10 +60,27 @@ function RenderBlock(props) {
                 shouldEvaluateBindings: true,
             });
     }
+    function proxyState() {
+        if (typeof Proxy === "undefined") {
+            console.error("no Proxy available in this environment, cannot proxy state.");
+            return props.context.state;
+        }
+        const useState = new Proxy(props.context.state, {
+            set: (obj, prop, value) => {
+                var _a, _b;
+                // set the value on the state object, so that the event handler instantly gets the update.
+                obj[prop] = value;
+                // set the value in the context, so that the rest of the app gets the update.
+                (_b = (_a = props.context).setState) === null || _b === void 0 ? void 0 : _b.call(_a, obj);
+                return true;
+            },
+        });
+        return useState;
+    }
     function actions() {
         return (0, get_block_actions_js_1.getBlockActions)({
             block: useBlock(),
-            state: props.context.state,
+            state: proxyState(),
             context: props.context.context,
         });
     }
@@ -137,6 +154,7 @@ function RenderBlock(props) {
             state: props.context.state,
             content: props.context.content,
             context: props.context.context,
+            setState: props.context.setState,
             registeredComponents: props.context.registeredComponents,
             inheritedStyles: getInheritedTextStyles(),
         };

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

@@ -35,6 +35,7 @@ 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,
             context: props.repeatContext.context,
             apiKey: props.repeatContext.apiKey,
             registeredComponents: props.repeatContext.registeredComponents,

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontCss = exports.getCss = void 0;
+const getCssFromFont = (font) => {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    let str = "";
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+const getFontCss = ({ customFonts }) => {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+exports.getFontCss = getFontCss;
+const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return "";
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+exports.getCss = getCss;

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

@@ -28,64 +28,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_1 = require("react");
 const render_inlined_styles_1 = __importDefault(require("../../render-inlined-styles"));
+const render_styles_helpers_1 = require("./render-styles.helpers");
+const render_styles_helpers_2 = require("./render-styles.helpers");
 function RenderContentStyles(props) {
-    function getCssFromFont(font) {
-        var _a, _b;
-        // TODO: compute what font sizes are used and only load those.......
-        const family = font.family +
-            (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-        const name = family.split(",")[0];
-        const url = (_a = font.fileUrl) !== null && _a !== void 0 ? _a : (_b = font === null || font === void 0 ? void 0 : font.files) === null || _b === void 0 ? void 0 : _b.regular;
-        let str = "";
-        if (url && family && name) {
-            str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-        }
-        if (font.files) {
-            for (const weight in font.files) {
-                const isNumber = String(Number(weight)) === weight;
-                if (!isNumber) {
-                    continue;
-                }
-                // TODO: maybe limit number loaded
-                const weightUrl = font.files[weight];
-                if (weightUrl && weightUrl !== url) {
-                    str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-                }
-            }
-        }
-        return str;
-    }
-    function getFontCss({ customFonts }) {
-        var _a;
-        // TODO: flag for this
-        // if (!builder.allowCustomFonts) {
-        //   return '';
-        // }
-        // TODO: separate internal data from external
-        return ((_a = customFonts === null || customFonts === void 0 ? void 0 : customFonts.map((font) => getCssFromFont(font))) === null || _a === void 0 ? void 0 : _a.join(" ")) || "";
-    }
-    function injectedStyles() {
-        return `
-${props.cssCode || ""}
-${getFontCss({
-            customFonts: props.customFonts,
-        })}`;
-    }
-    return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles() });
+    const [injectedStyles, setInjectedStyles] = (0, react_1.useState)(() => `
+${(0, render_styles_helpers_1.getCss)({
+        cssCode: props.cssCode,
+        contentId: props.contentId,
+    })}
+${(0, render_styles_helpers_2.getFontCss)({
+        customFonts: props.customFonts,
+    })}
+`);
+    return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles });
 }
 exports.default = RenderContentStyles;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContextStateInitialValue = exports.getContentInitialValue = void 0;
+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));
+const getContextStateInitialValue = ({ content, data, locale }) => {
+    var _a, _b, _c;
+    const defaultValues = {};
+    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+        var _a2;
+        if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+    return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
+};
+exports.getContextStateInitialValue = getContextStateInitialValue;
+const getContentInitialValue = ({ content, data }) => {
+    return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
+        data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
+        meta: content == null ? void 0 : content.meta
+    });
+};
+exports.getContentInitialValue = getContentInitialValue;

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

@@ -45,51 +45,51 @@ const builder_context_js_1 = __importDefault(require("../../context/builder.cont
 const init_editing_js_1 = require("../../scripts/init-editing.js");
 const nullable_js_1 = require("../../helpers/nullable.js");
 const interaction_js_1 = require("../../functions/track/interaction.js");
+const render_content_helpers_js_1 = require("./render-content.helpers.js");
 function RenderContent(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e;
     const elementRef = (0, react_1.useRef)(null);
     const [forceReRenderCount, setForceReRenderCount] = (0, react_1.useState)(() => 0);
     const [overrideContent, setOverrideContent] = (0, react_1.useState)(() => null);
-    function useContent() {
-        var _a, _b, _c, _d, _e;
-        if (!props.content && !overrideContent) {
-            return undefined;
-        }
-        return {
-            ...props.content,
-            ...overrideContent,
+    const [useContent, setUseContent] = (0, react_1.useState)(() => (0, render_content_helpers_js_1.getContentInitialValue)({
+        content: props.content,
+        data: props.data,
+    }));
+    function mergeNewContent(newContent) {
+        var _a, _b;
+        setUseContent({
+            ...useContent,
+            ...newContent,
             data: {
-                ...(_a = props.content) === null || _a === void 0 ? void 0 : _a.data,
-                ...props.data,
-                ...overrideContent === null || overrideContent === void 0 ? void 0 : overrideContent.data,
+                ...useContent === null || useContent === void 0 ? void 0 : useContent.data,
+                ...newContent === null || newContent === void 0 ? void 0 : newContent.data,
             },
             meta: {
-                ...(_b = props.content) === null || _b === void 0 ? void 0 : _b.meta,
-                ...overrideContent === null || overrideContent === void 0 ? void 0 : overrideContent.meta,
-                breakpoints: useBreakpoints ||
-                    ((_c = overrideContent === null || overrideContent === void 0 ? void 0 : overrideContent.meta) === null || _c === void 0 ? void 0 : _c.breakpoints) ||
-                    ((_e = (_d = props.content) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.breakpoints),
+                ...useContent === null || useContent === void 0 ? void 0 : useContent.meta,
+                ...newContent === null || newContent === void 0 ? void 0 : newContent.meta,
+                breakpoints: ((_a = newContent === null || newContent === void 0 ? void 0 : newContent.meta) === null || _a === void 0 ? void 0 : _a.breakpoints) || ((_b = useContent === null || useContent === void 0 ? void 0 : useContent.meta) === null || _b === void 0 ? void 0 : _b.breakpoints),
             },
-        };
+        });
+    }
+    function setBreakpoints(breakpoints) {
+        setUseContent({
+            ...useContent,
+            meta: {
+                ...useContent === null || useContent === void 0 ? void 0 : useContent.meta,
+                breakpoints,
+            },
+        });
     }
     const [update, setUpdate] = (0, react_1.useState)(() => 0);
-    const [useBreakpoints, setUseBreakpoints] = (0, react_1.useState)(() => null);
     const [canTrackToUse, setCanTrackToUse] = (0, react_1.useState)(() => (0, nullable_js_1.checkIsDefined)(props.canTrack) ? props.canTrack : true);
-    const [overrideState, setOverrideState] = (0, react_1.useState)(() => ({}));
-    function contentState() {
-        var _a, _b;
-        return {
-            ...(_b = (_a = props.content) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.state,
-            ...props.data,
-            ...(props.locale
-                ? {
-                    locale: props.locale,
-                }
-                : {}),
-            ...overrideState,
-        };
+    const [contentState, setContentState] = (0, react_1.useState)(() => (0, render_content_helpers_js_1.getContextStateInitialValue)({
+        content: props.content,
+        data: props.data,
+        locale: props.locale,
+    }));
+    function setContextState(newState) {
+        setContentState(newState);
     }
-    const [contextContext, setContextContext] = (0, react_1.useState)(() => props.context || {});
     const [allRegisteredComponents, setAllRegisteredComponents] = (0, react_1.useState)(() => [
         ...(0, builder_registered_components_js_1.getDefaultRegisteredComponents)(),
         // While this `components` object is deprecated, we must maintain support for it.
@@ -104,17 +104,18 @@ function RenderContent(props) {
         [curr.name]: curr,
     }), {}));
     function processMessage(event) {
-        var _a;
         const { data } = event;
         if (data) {
             switch (data.type) {
                 case "builder.configureSdk": {
                     const messageContent = data.data;
                     const { breakpoints, contentId } = messageContent;
-                    if (!contentId || contentId !== ((_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.id)) {
+                    if (!contentId || contentId !== (useContent === null || useContent === void 0 ? void 0 : useContent.id)) {
                         return;
                     }
-                    setUseBreakpoints(breakpoints);
+                    if (breakpoints) {
+                        setBreakpoints(breakpoints);
+                    }
                     setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
                     break;
                 }
@@ -126,7 +127,7 @@ function RenderContent(props) {
                         messageContent.modelName;
                     const contentData = messageContent.data;
                     if (key === props.model) {
-                        setOverrideContent(contentData);
+                        mergeNewContent(contentData);
                         setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
                     }
                     break;
@@ -139,24 +140,23 @@ function RenderContent(props) {
         }
     }
     function evaluateJsCode() {
-        var _a, _b;
+        var _a;
         // run any dynamic JS code attached to content
-        const jsCode = (_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.jsCode;
+        const jsCode = (_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.jsCode;
         if (jsCode) {
             (0, evaluate_js_1.evaluate)({
                 code: jsCode,
-                context: contextContext,
-                state: contentState(),
+                context: props.context || {},
+                state: contentState,
             });
         }
     }
     const [httpReqsData, setHttpReqsData] = (0, react_1.useState)(() => ({}));
     const [clicked, setClicked] = (0, react_1.useState)(() => false);
     function onClick(event) {
-        var _a, _b;
-        if (useContent()) {
-            const variationId = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.testVariationId;
-            const contentId = (_b = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _b === void 0 ? void 0 : _b.id;
+        if (useContent) {
+            const variationId = useContent === null || useContent === void 0 ? void 0 : useContent.testVariationId;
+            const contentId = useContent === null || useContent === void 0 ? void 0 : useContent.id;
             (0, index_js_2._track)({
                 type: "click",
                 canTrack: canTrackToUse,
@@ -174,27 +174,27 @@ function RenderContent(props) {
     function evalExpression(expression) {
         return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_js_1.evaluate)({
             code: group,
-            context: contextContext,
-            state: contentState(),
+            context: props.context || {},
+            state: contentState,
         }));
     }
     function handleRequest({ url, key }) {
         (0, get_fetch_js_1.fetch)(url)
             .then((response) => response.json())
             .then((json) => {
-            const newOverrideState = {
-                ...overrideState,
+            const newState = {
+                ...contentState,
                 [key]: json,
             };
-            setOverrideState(newOverrideState);
+            setContextState(newState);
         })
             .catch((err) => {
             console.log("error fetching dynamic data", url, err);
         });
     }
     function runHttpRequests() {
-        var _a, _b, _c;
-        const requests = (_c = (_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.httpRequests) !== null && _c !== void 0 ? _c : {};
+        var _a, _b;
+        const requests = (_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.httpRequests) !== null && _b !== void 0 ? _b : {};
         Object.entries(requests).forEach(([key, url]) => {
             if (url && (!httpReqsData[key] || (0, is_editing_js_1.isEditing)())) {
                 const evaluatedUrl = evalExpression(url);
@@ -209,7 +209,7 @@ function RenderContent(props) {
         if ((0, is_editing_js_1.isEditing)()) {
             window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
                 detail: {
-                    state: contentState(),
+                    state: contentState,
                     ref: {
                         name: props.model,
                     },
@@ -218,13 +218,11 @@ function RenderContent(props) {
         }
     }
     function shouldRenderContentStyles() {
-        var _a, _b, _c, _d, _e;
-        return Boolean((((_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.cssCode) ||
-            ((_e = (_d = (_c = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.customFonts) === null || _e === void 0 ? void 0 : _e.length)) &&
+        var _a, _b, _c;
+        return Boolean((((_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.cssCode) || ((_c = (_b = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _b === void 0 ? void 0 : _b.customFonts) === null || _c === void 0 ? void 0 : _c.length)) &&
             target_js_1.TARGET !== "reactNative");
     }
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (!props.apiKey) {
             console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
         }
@@ -252,9 +250,9 @@ function RenderContent(props) {
                 window.addEventListener("message", processMessage);
                 window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
             }
-            if (useContent()) {
-                const variationId = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.testVariationId;
-                const contentId = (_b = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _b === void 0 ? void 0 : _b.id;
+            if (useContent) {
+                const variationId = useContent === null || useContent === void 0 ? void 0 : useContent.testVariationId;
+                const contentId = useContent === null || useContent === void 0 ? void 0 : useContent.id;
                 (0, index_js_2._track)({
                     type: "impression",
                     canTrack: canTrackToUse,
@@ -284,7 +282,7 @@ function RenderContent(props) {
                         apiKey: props.apiKey,
                     }).then((content) => {
                         if (content) {
-                            setOverrideContent(content);
+                            mergeNewContent(content);
                         }
                     });
                 }
@@ -296,13 +294,13 @@ function RenderContent(props) {
     }, []);
     (0, react_1.useEffect)(() => {
         evaluateJsCode();
-    }, [(_b = (_a = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.jsCode, contentState()]);
+    }, [(_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.jsCode, contentState]);
     (0, react_1.useEffect)(() => {
         runHttpRequests();
-    }, [(_d = (_c = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.httpRequests]);
+    }, [(_b = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _b === void 0 ? void 0 : _b.httpRequests]);
     (0, react_1.useEffect)(() => {
         emitStateUpdate();
-    }, [contentState()]);
+    }, [contentState]);
     (0, react_1.useEffect)(() => {
         return () => {
             if ((0, is_browser_js_1.isBrowser)()) {
@@ -312,14 +310,15 @@ function RenderContent(props) {
         };
     }, []);
     return (React.createElement(builder_context_js_1.default.Provider, { value: {
-            content: useContent(),
-            state: contentState(),
-            context: contextContext,
+            content: useContent,
+            state: contentState,
+            setState: setContextState,
+            context: props.context || {},
             apiKey: props.apiKey,
             registeredComponents: allRegisteredComponents,
-        } }, useContent() ? (React.createElement(React.Fragment, null,
-        React.createElement(react_native_1.View, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": (_e = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _e === void 0 ? void 0 : _e.id, "builder-model": props.model },
-            shouldRenderContentStyles() ? (React.createElement(render_styles_1.default, { cssCode: (_g = (_f = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.cssCode, customFonts: (_j = (_h = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.customFonts })) : null,
-            React.createElement(render_blocks_1.default, { blocks: (_l = (_k = useContent === null || useContent === void 0 ? void 0 : useContent()) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.blocks, key: forceReRenderCount })))) : null));
+        } }, useContent ? (React.createElement(React.Fragment, null,
+        React.createElement(react_native_1.View, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },
+            shouldRenderContentStyles() ? (React.createElement(render_styles_1.default, { contentId: useContent === null || useContent === void 0 ? void 0 : useContent.id, cssCode: (_c = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _c === void 0 ? void 0 : _c.cssCode, customFonts: (_d = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _d === void 0 ? void 0 : _d.customFonts })) : null,
+            React.createElement(render_blocks_1.default, { blocks: (_e = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _e === void 0 ? void 0 : _e.blocks, key: forceReRenderCount })))) : null));
 }
 exports.default = RenderContent;