@builder.io/sdk-react 0.1.3 → 0.1.5

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

@@ -10,54 +10,55 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 export default function RenderContent(props) {
     const elementRef = useRef(null);
     const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
     const [overrideContent, setOverrideContent] = useState(() => null);
-    function useContent() {
-        if (!props.content && !overrideContent) {
-            return undefined;
-        }
-        return {
-            ...props.content,
-            ...overrideContent,
+    const [useContent, setUseContent] = useState(() => getContentInitialValue({
+        content: props.content,
+        data: props.data,
+    }));
+    function mergeNewContent(newContent) {
+        setUseContent({
+            ...useContent,
+            ...newContent,
             data: {
-                ...props.content?.data,
-                ...props.data,
-                ...overrideContent?.data,
+                ...useContent?.data,
+                ...newContent?.data,
             },
             meta: {
-                ...props.content?.meta,
-                ...overrideContent?.meta,
-                breakpoints: useBreakpoints ||
-                    overrideContent?.meta?.breakpoints ||
-                    props.content?.meta?.breakpoints,
+                ...useContent?.meta,
+                ...newContent?.meta,
+                breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
             },
-        };
+        });
+    }
+    function setBreakpoints(breakpoints) {
+        setUseContent({
+            ...useContent,
+            meta: {
+                ...useContent?.meta,
+                breakpoints,
+            },
+        });
     }
     const [update, setUpdate] = useState(() => 0);
-    const [useBreakpoints, setUseBreakpoints] = useState(() => null);
     const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
-    const [overrideState, setOverrideState] = useState(() => ({}));
-    function contentState() {
-        return {
-            ...props.content?.data?.state,
-            ...props.data,
-            ...(props.locale
-                ? {
-                    locale: props.locale,
-                }
-                : {}),
-            ...overrideState,
-        };
+    const [contentState, setContentState] = useState(() => getContextStateInitialValue({
+        content: props.content,
+        data: props.data,
+        locale: props.locale,
+    }));
+    function setContextState(newState) {
+        setContentState(newState);
     }
-    const [contextContext, setContextContext] = useState(() => props.context || {});
     const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
         ...getDefaultRegisteredComponents(),
         // While this `components` object is deprecated, we must maintain support for it.
@@ -78,10 +79,12 @@ export default function RenderContent(props) {
                 case "builder.configureSdk": {
                     const messageContent = data.data;
                     const { breakpoints, contentId } = messageContent;
-                    if (!contentId || contentId !== useContent?.()?.id) {
+                    if (!contentId || contentId !== useContent?.id) {
                         return;
                     }
-                    setUseBreakpoints(breakpoints);
+                    if (breakpoints) {
+                        setBreakpoints(breakpoints);
+                    }
                     setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
                     break;
                 }
@@ -93,7 +96,7 @@ export default 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;
@@ -107,21 +110,21 @@ export default function RenderContent(props) {
     }
     function evaluateJsCode() {
         // run any dynamic JS code attached to content
-        const jsCode = useContent?.()?.data?.jsCode;
+        const jsCode = useContent?.data?.jsCode;
         if (jsCode) {
             evaluate({
                 code: jsCode,
-                context: contextContext,
-                state: contentState(),
+                context: props.context || {},
+                state: contentState,
             });
         }
     }
     const [httpReqsData, setHttpReqsData] = useState(() => ({}));
     const [clicked, setClicked] = useState(() => false);
     function onClick(event) {
-        if (useContent()) {
-            const variationId = useContent?.()?.testVariationId;
-            const contentId = useContent?.()?.id;
+        if (useContent) {
+            const variationId = useContent?.testVariationId;
+            const contentId = useContent?.id;
             _track({
                 type: "click",
                 canTrack: canTrackToUse,
@@ -139,26 +142,26 @@ export default function RenderContent(props) {
     function evalExpression(expression) {
         return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
             code: group,
-            context: contextContext,
-            state: contentState(),
+            context: props.context || {},
+            state: contentState,
         }));
     }
     function handleRequest({ url, key }) {
         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() {
-        const requests = useContent?.()?.data?.httpRequests ?? {};
+        const requests = useContent?.data?.httpRequests ?? {};
         Object.entries(requests).forEach(([key, url]) => {
             if (url && (!httpReqsData[key] || isEditing())) {
                 const evaluatedUrl = evalExpression(url);
@@ -173,7 +176,7 @@ export default function RenderContent(props) {
         if (isEditing()) {
             window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
                 detail: {
-                    state: contentState(),
+                    state: contentState,
                     ref: {
                         name: props.model,
                     },
@@ -182,8 +185,7 @@ export default function RenderContent(props) {
         }
     }
     function shouldRenderContentStyles() {
-        return Boolean((useContent?.()?.data?.cssCode ||
-            useContent?.()?.data?.customFonts?.length) &&
+        return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
             TARGET !== "reactNative");
     }
     useEffect(() => {
@@ -213,9 +215,9 @@ export default function RenderContent(props) {
                 window.addEventListener("message", processMessage);
                 window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
             }
-            if (useContent()) {
-                const variationId = useContent?.()?.testVariationId;
-                const contentId = useContent?.()?.id;
+            if (useContent) {
+                const variationId = useContent?.testVariationId;
+                const contentId = useContent?.id;
                 _track({
                     type: "impression",
                     canTrack: canTrackToUse,
@@ -245,7 +247,7 @@ export default function RenderContent(props) {
                         apiKey: props.apiKey,
                     }).then((content) => {
                         if (content) {
-                            setOverrideContent(content);
+                            mergeNewContent(content);
                         }
                     });
                 }
@@ -257,13 +259,13 @@ export default function RenderContent(props) {
     }, []);
     useEffect(() => {
         evaluateJsCode();
-    }, [useContent?.()?.data?.jsCode, contentState()]);
+    }, [useContent?.data?.jsCode, contentState]);
     useEffect(() => {
         runHttpRequests();
-    }, [useContent?.()?.data?.httpRequests]);
+    }, [useContent?.data?.httpRequests]);
     useEffect(() => {
         emitStateUpdate();
-    }, [contentState()]);
+    }, [contentState]);
     useEffect(() => {
         return () => {
             if (isBrowser()) {
@@ -273,13 +275,14 @@ export default function RenderContent(props) {
         };
     }, []);
     return (React.createElement(builderContext.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("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.()?.id, "builder-model": props.model },
-            shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { cssCode: useContent?.()?.data?.cssCode, customFonts: useContent?.()?.data?.customFonts })) : null,
-            React.createElement(RenderBlocks, { blocks: useContent?.()?.data?.blocks, key: forceReRenderCount })))) : null));
+        } }, useContent ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
+            shouldRenderContentStyles() ? (React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts })) : null,
+            React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
 }

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -10,6 +10,6 @@ export default function RenderInlinedStyles(props) {
         return "sty" + "le";
     }
     const TagRef = tag();
-    return (React.createElement(React.Fragment, null, TARGET === "svelte" ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { dangerouslySetInnerHTML: { __html: injectedStyleScript() } }))) : (React.createElement(TagRef, null, props.styles))));
+    return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
+        React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
 }

package/dist/react/constants/builder-registered-components.js

@@ -14,39 +14,39 @@ var __spreadValues = (a, b) => {
         }
     return a;
 };
-import { default as Button } from "../blocks/button/button.js";
+import { default as Button } from "../blocks/button/button";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.js";
+import { default as Columns } from "../blocks/columns/columns";
 import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
 import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
-import { default as Fragment } from "../blocks/fragment/fragment.js";
+import { default as Fragment } from "../blocks/fragment/fragment";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.js";
+import { default as Image } from "../blocks/image/image";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.js";
+import { default as Section } from "../blocks/section/section";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.js";
+import { default as Symbol } from "../blocks/symbol/symbol";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.js";
+import { default as Text } from "../blocks/text/text";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.js";
+import { default as Video } from "../blocks/video/video";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.js";
-import { default as Img } from "../blocks/img/img.js";
+import { default as embed } from "../blocks/embed/embed";
+import { default as Img } from "../blocks/img/img";
 import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.js";
+import { default as customCode } from "../blocks/custom-code/custom-code";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
+    __spreadValues({ component: Button }, buttonComponentInfo),
     __spreadValues({ component: Columns }, columnsComponentInfo),
+    __spreadValues({ component: customCode }, customCodeInfo),
+    __spreadValues({ component: embed }, embedComponentInfo),
+    __spreadValues({ component: Fragment }, fragmentComponentInfo),
     __spreadValues({ component: Image }, imageComponentInfo),
     __spreadValues({ component: Img }, imgComponentInfo),
-    __spreadValues({ component: Text }, textComponentInfo),
-    __spreadValues({ component: Video }, videoComponentInfo),
-    __spreadValues({ component: Symbol }, symbolComponentInfo),
-    __spreadValues({ component: Button }, buttonComponentInfo),
     __spreadValues({ component: Section }, sectionComponentInfo),
-    __spreadValues({ component: Fragment }, fragmentComponentInfo),
-    __spreadValues({ component: embed }, embedComponentInfo),
-    __spreadValues({ component: customCode }, customCodeInfo)
+    __spreadValues({ component: Symbol }, symbolComponentInfo),
+    __spreadValues({ component: Text }, textComponentInfo),
+    __spreadValues({ component: Video }, videoComponentInfo)
 ];
 export { getDefaultRegisteredComponents };

package/dist/react/context/builder.context.js

@@ -3,6 +3,8 @@ var stdin_default = createContext({
     content: null,
     context: {},
     state: {},
+    setState() {
+    },
     apiKey: null,
     registeredComponents: {},
     inheritedStyles: {}

package/dist/react/index-helpers/blocks-exports.js

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns/columns.js";
-import { default as default3 } from "../blocks/image/image.js";
-import { default as default4 } from "../blocks/text/text.js";
-import { default as default5 } from "../blocks/video/video.js";
-import { default as default6 } from "../blocks/symbol/symbol.js";
-import { default as default7 } from "../blocks/button/button.js";
-import { default as default8 } from "../blocks/section/section.js";
-import { default as default9 } from "../blocks/fragment/fragment.js";
-import { default as default10 } from "../components/render-content/render-content.js";
-import { default as default11 } from "../components/render-blocks.js";
-export { default7 as Button, default2 as Columns, default9 as Fragment, default3 as Image, default11 as RenderBlocks, default10 as RenderContent, default8 as Section, default6 as Symbol, default4 as Text, default5 as Video };
+import { default as default2 } from "../blocks/button/button";
+import { default as default3 } from "../blocks/columns/columns";
+import { default as default4 } from "../blocks/fragment/fragment";
+import { default as default5 } from "../blocks/image/image";
+import { default as default6 } from "../components/render-blocks";
+import { default as default7 } from "../components/render-content/render-content";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/symbol/symbol";
+import { default as default10 } from "../blocks/text/text";
+import { default as default11 } from "../blocks/video/video";
+export { default2 as Button, default3 as Columns, default4 as Fragment, default5 as Image, default6 as RenderBlocks, default7 as RenderContent, default8 as Section, default9 as Symbol, default10 as Text, default11 as Video };

package/dist/react/types/input.js

@@ -0,0 +1 @@
+"use strict";

package/dist/rsc/blocks/button/button.js

@@ -3,8 +3,8 @@ export default function Button(props) {
     const _context = { ...props["_context"] };
     return (React.createElement(React.Fragment, null,
         props.link ? (React.createElement(React.Fragment, null,
-            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-12870b9c", ...props.attributes }, props.text)),
-        React.createElement("style", null, `.button-12870b9c {
+            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-b25d5310", ...props.attributes }, props.text)),
+        React.createElement("style", null, `.button-b25d5310 {
 all: unset;
 }`)));
 }

package/dist/rsc/blocks/columns/columns.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 export default function Columns(props) {
@@ -108,13 +108,13 @@ export default function Columns(props) {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-540739f0", style: {
+                " div-ca644030", style: {
                 ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
                 ...state.columnsCssVars,
             } },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: state.columnsStyles, _context: _context }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-540739f0-2", style: {
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-ca644030-2", style: {
                     width: state.getColumnCssWidth(index),
                     marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
                     ...(TARGET === "reactNative"
@@ -125,10 +125,10 @@ export default function Columns(props) {
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     }, _context: _context }))))),
-        React.createElement("style", null, `.div-540739f0 {
+        React.createElement("style", null, `.div-ca644030 {
 display: flex;
 line-height: normal;
-}.div-540739f0-2 {
+}.div-ca644030-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/rsc/blocks/form/form.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import RenderBlock from "../../components/render-block/render-block.js";
-import BuilderBlocks from "../../components/render-blocks.js";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
 import { isEditing } from "../../functions/is-editing.js";
 export default function FormComponent(props) {
     const _context = { ...props["_context"] };
@@ -190,7 +190,7 @@ export default function FormComponent(props) {
                 React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage, _context: _context }))) : null,
             " ",
             state.submissionState === "error" && state.responseData ? (React.createElement(React.Fragment, null,
-                React.createElement("pre", { className: "builder-form-error-text pre-105231da" },
+                React.createElement("pre", { className: "builder-form-error-text pre-41e7c77e" },
                     " ",
                     JSON.stringify(state.responseData, null, 2),
                     " "))) : null,
@@ -199,6 +199,6 @@ export default function FormComponent(props) {
                 React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage, _context: _context }))) : null,
             " "),
         " ",
-        React.createElement("style", null, `.pre-105231da { padding: 10px; color: red; text-align: center; }`),
+        React.createElement("style", null, `.pre-41e7c77e { padding: 10px; color: red; text-align: center; }`),
         " "));
 }

package/dist/rsc/blocks/image/image.js

@@ -54,25 +54,25 @@ export default function Image(props) {
                         ...state.aspectRatioCss,
                     }, className: "builder-image" +
                         (props.className ? " " + props.className : "") +
-                        " img-d6cf1f9c", src: props.image, srcSet: state.srcSetToUse, sizes: props.sizes })),
+                        " img-5aa89e3a", src: props.image, srcSet: state.srcSetToUse, sizes: props.sizes })),
             props.aspectRatio &&
                 !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-d6cf1f9c", style: {
+                React.createElement("div", { className: "builder-image-sizer div-5aa89e3a", style: {
                         paddingTop: 
                         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                         props.aspectRatio * 100 + "%",
                     } }))) : null,
             props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
             !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-d6cf1f9c-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-d6cf1f9c {
+                React.createElement("div", { className: "div-5aa89e3a-2" }, props.children))) : null),
+        React.createElement("style", null, `.img-5aa89e3a {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
-}.div-d6cf1f9c {
+}.div-5aa89e3a {
 width: 100%;
 pointer-events: none;
 font-size: 0;
-}.div-d6cf1f9c-2 {
+}.div-5aa89e3a-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/dist/rsc/blocks/symbol/symbol.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import RenderContent from "../../components/render-content/render-content.js";
+import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";

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

@@ -3,7 +3,7 @@ import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constant
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
-import RenderInlinedStyles from "../render-inlined-styles.js";
+import RenderInlinedStyles from "../render-inlined-styles";
 export default function BlockStyles(props) {
     const _context = { ...props["_context"] };
     const state = {

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

@@ -4,12 +4,12 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles.js";
+import BlockStyles from "./block-styles";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block.js";
+import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component.js";
+import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 export default function RenderBlock(props) {
     const _context = { ...props["_context"] };
@@ -31,10 +31,26 @@ export default function RenderBlock(props) {
                     shouldEvaluateBindings: true,
                 });
         },
+        get 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) => {
+                    // 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.
+                    props.context.setState?.(obj);
+                    return true;
+                },
+            });
+            return useState;
+        },
         get actions() {
             return getBlockActions({
                 block: state.useBlock,
-                state: props.context.state,
+                state: state.proxyState,
                 context: props.context.context,
             });
         },
@@ -108,6 +124,7 @@ export default 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/rsc/components/render-block/render-component.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import BlockStyles from "./block-styles.js";
-import RenderBlock from "./render-block.js";
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
 export default function RenderComponent(props) {
     const _context = { ...props["_context"] };
     const ComponentRefRef = props.componentRef;

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

@@ -1,11 +1,12 @@
 import * as React from "react";
 import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block.js";
+import RenderBlock from "./render-block";
 export default function RenderRepeatedBlock(props) {
     const _context = { ...props["_context"] };
     _context.BuilderContext = {
         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/rsc/components/render-blocks.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
 export default function RenderBlocks(props) {
     const _context = { ...props["_context"] };
     const state = {
@@ -34,12 +34,12 @@ export default function RenderBlocks(props) {
     };
     const builderContext = _context["BuilderContext"];
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: state.className + " div-4f307ff9", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+        React.createElement("div", { className: state.className + " div-d19f7a9a", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
                 class: state.className,
             }, style: props.styleProp },
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext, _context: _context }))))) : null,
             props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext, _context: _context }))))) : null),
-        React.createElement("style", null, `.div-4f307ff9 {
+        React.createElement("style", null, `.div-d19f7a9a {
 display: flex;
 flex-direction: column;
 align-items: stretch;