@builder.io/sdk-react-native 2.0.15 → 2.0.21

package/lib/node/typescript/functions/evaluate/browser-runtime/browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../../../../../src/functions/evaluate/browser-runtime/browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,eAAO,MAAM,YAAY,2EAQtB,YAAY,QAYd,CAAC;AACF,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,UAAU,EACV,YAAY,EACb,EAAE;IACD,SAAS,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IACrD,YAAY,EAAE,CAAC,CAAC,SAAS,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACrE,GAAG,kBAAkB,CA4BrB"}
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../../../../../src/functions/evaluate/browser-runtime/browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,eAAO,MAAM,YAAY,2EAQtB,YAAY,QAYd,CAAA"}

package/lib/node/typescript/functions/evaluate/choose-eval.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choose-eval.d.ts","sourceRoot":"","sources":["../../../../../src/functions/evaluate/choose-eval.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAgB9C;;;GAGG;AACH,eAAO,MAAM,yBAAyB,SAAU,YAAY,QAA4F,CAAA"}
+{"version":3,"file":"choose-eval.d.ts","sourceRoot":"","sources":["../../../../../src/functions/evaluate/choose-eval.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAgB9C;;;GAGG;AACH,eAAO,MAAM,yBAAyB,SAAU,YAAY,QAEnB,CAAA"}

package/lib/node/typescript/functions/evaluate/helpers.d.ts

@@ -23,4 +23,9 @@ export declare const getFunctionArguments: ({ builder, context, event, state }:
 }) => [string, Event | BuilderRenderState | import("../../context/types").BuilderRenderContext | BuilderGlobals][];
 export declare const getBuilderGlobals: () => BuilderGlobals;
 export declare const parseCode: (code: string, { isExpression }: Pick<EvaluatorArgs, 'isExpression'>) => string;
+export declare function flattenState({ rootState, localState, rootSetState }: {
+    rootState: Record<string | symbol, any>;
+    localState: Record<string | symbol, any> | undefined;
+    rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+}): BuilderRenderState;
 //# sourceMappingURL=helpers.d.ts.map

package/lib/node/typescript/functions/evaluate/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/functions/evaluate/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,OAAO,CAAC,GAAG;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;CAC7C,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,uBAAuB,EAAE,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,cAAc,CAAC,GAAG;IAClH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,YAAY,KAAK,GAAG,CAAC;AACnD,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACxE,eAAO,MAAM,oBAAoB;WAMxB,kBAAkB;kHAU1B,CAAC;AACF,eAAO,MAAM,iBAAiB,QAAO,cAKnC,CAAC;AACH,eAAO,MAAM,SAAS,SAAU,MAAM,oBAEnC,KAAK,aAAa,EAAE,cAAc,CAAC,WAQrC,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/functions/evaluate/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,OAAO,CAAC,GAAG;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,iBAAiB,EAAE,OAAO,iBAAiB,CAAC;CAC7C,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,uBAAuB,EAAE,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,cAAc,CAAC,GAAG;IAClH,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,YAAY,KAAK,GAAG,CAAC;AACnD,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACxE,eAAO,MAAM,oBAAoB;WAMxB,kBAAkB;kHAU1B,CAAC;AACF,eAAO,MAAM,iBAAiB,QAAO,cAKnC,CAAC;AACH,eAAO,MAAM,SAAS,SAAU,MAAM,oBAEnC,KAAK,aAAa,EAAE,cAAc,CAAC,WAQrC,CAAC;AACF,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,UAAU,EACV,YAAY,EACb,EAAE;IACD,SAAS,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IACrD,YAAY,EAAE,CAAC,CAAC,SAAS,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACrE,GAAG,kBAAkB,CA4BrB"}

package/lib/node/typescript/functions/evaluate/should-force-browser-runtime-in-node.d.ts

@@ -1,2 +1,4 @@
-export declare const shouldForceBrowserRuntimeInNode: () => boolean;
+export declare const shouldForceBrowserRuntimeInNode: ({ shouldLogWarning }: {
+    shouldLogWarning: boolean;
+}) => boolean;
 //# sourceMappingURL=should-force-browser-runtime-in-node.d.ts.map

package/lib/node/typescript/functions/evaluate/should-force-browser-runtime-in-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"should-force-browser-runtime-in-node.d.ts","sourceRoot":"","sources":["../../../../../src/functions/evaluate/should-force-browser-runtime-in-node.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,+BAA+B,eAa3C,CAAA"}
+{"version":3,"file":"should-force-browser-runtime-in-node.d.ts","sourceRoot":"","sources":["../../../../../src/functions/evaluate/should-force-browser-runtime-in-node.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,+BAA+B;sBAGxB,OAAO;aAgB1B,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "2.0.15",
+  "version": "2.0.21",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react-native",
   "repository": {
     "type": "git",

package/src/components/awaiter.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from "react-native";
+import { useEffect } from "react";
+
+/**
+ * Placeholder component to be overridden by specific SDKs.
+ * Allows to dynamically import components.
+ */
+
+type AwaiterProps = {
+  load: () => Promise<any>;
+  props?: any;
+  attributes?: any;
+  fallback?: any;
+  children?: any;
+};
+
+function Awaiter(props: AwaiterProps) {
+  useEffect(() => {}, []);
+
+  return <>{props.children}</>;
+}
+
+export default Awaiter;

package/src/components/block/components/interactive-element.tsx

@@ -26,6 +26,7 @@ import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
 import type { BuilderBlock } from "../../../types/builder-block";
 import type { Dictionary } from "../../../types/typescript";
+import Awaiter from "../../awaiter";
 
 function InteractiveElement(props: InteractiveElementProps) {
   function attributes() {
@@ -47,9 +48,24 @@ function InteractiveElement(props: InteractiveElementProps) {
   }
 
   return (
-    <props.Wrapper {...props.wrapperProps} attributes={attributes()}>
-      {props.children}
-    </props.Wrapper>
+    <>
+      {props.Wrapper.load ? (
+        <>
+          <Awaiter
+            load={props.Wrapper.load}
+            fallback={props.Wrapper.fallback}
+            props={props.wrapperProps}
+            attributes={attributes()}
+          >
+            {props.children}
+          </Awaiter>
+        </>
+      ) : (
+        <props.Wrapper {...props.wrapperProps} attributes={attributes()}>
+          {props.children}
+        </props.Wrapper>
+      )}
+    </>
   );
 }
 

package/src/components/content/components/enable-editor.tsx

@@ -33,7 +33,6 @@ import type { BuilderContextInterface } from "../../../context/types";
 import { evaluate } from "../../../functions/evaluate/index";
 import { fastClone } from "../../../functions/fast-clone";
 import { fetchOneEntry } from "../../../functions/get-content/index";
-import { fetch } from "../../../functions/get-fetch";
 import { isBrowser } from "../../../functions/is-browser";
 import { isEditing } from "../../../functions/is-editing";
 import { isPreviewing } from "../../../functions/is-previewing";
@@ -41,7 +40,6 @@ import { createRegisterComponentMessage } from "../../../functions/register-comp
 import { _track } from "../../../functions/track/index";
 import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction";
 import { getDefaultCanTrack } from "../../../helpers/canTrack";
-import { logger } from "../../../helpers/logger";
 import { postPreviewContent } from "../../../helpers/preview-lru-cache/set";
 import { createEditorListener } from "../../../helpers/subscribe-to-editor";
 import {
@@ -142,24 +140,6 @@ function EnableEditor(props: BuilderEditorProps) {
     })(event);
   }
 
-  function evaluateJsCode() {
-    // run any dynamic JS code attached to content
-    const jsCode = props.builderContextSignal.content?.data?.jsCode;
-    if (jsCode) {
-      evaluate({
-        code: jsCode,
-        context: props.context || {},
-        localState: undefined,
-        rootState: props.builderContextSignal.rootState,
-        rootSetState: props.builderContextSignal.rootSetState,
-        /**
-         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
-         */
-        enableCache: false,
-      });
-    }
-  }
-
   const [httpReqsData, setHttpReqsData] = useState(() => ({}));
 
   const [httpReqsPending, setHttpReqsPending] = useState(() => ({}));
@@ -310,6 +290,13 @@ function EnableEditor(props: BuilderEditorProps) {
     }
   }
 
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    runHttpRequests();
+    emitStateUpdate();
+    hasInitialized.current = true;
+  }
+
   useEffect(() => {
     if (isBrowser()) {
       if (isEditing()) {
@@ -397,28 +384,12 @@ function EnableEditor(props: BuilderEditorProps) {
       }
     }
   }, []);
-  useEffect(() => {
-    if (!props.apiKey) {
-      logger.error(
-        "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
-      );
-    }
-    evaluateJsCode();
-    runHttpRequests();
-    emitStateUpdate();
-  }, []);
 
   useEffect(() => {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }, [props.content]);
-  useEffect(() => {
-    evaluateJsCode();
-  }, [props.builderContextSignal.content?.data?.jsCode]);
-  useEffect(() => {
-    runHttpRequests();
-  }, [props.builderContextSignal.content?.data?.httpRequests]);
   useEffect(() => {
     emitStateUpdate();
   }, [props.builderContextSignal.rootState]);

package/src/components/content/content.tsx

@@ -12,7 +12,7 @@ import {
   Button,
   Linking,
 } from "react-native";
-import { useState, useContext } from "react";
+import { useState, useContext, useRef } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components";
 import { TARGET } from "../../constants/target";
 import ComponentsContext from "../../context/components.context";
@@ -21,7 +21,9 @@ import type {
   BuilderRenderState,
   RegisteredComponents,
 } from "../../context/types";
+import { evaluate } from "../../functions/evaluate/evaluate";
 import { serializeIncludingFunctions } from "../../functions/register-component";
+import { logger } from "../../helpers/logger";
 import type { ComponentInfo } from "../../types/components";
 import type { Dictionary } from "../../types/typescript";
 import Blocks from "../blocks/blocks";
@@ -74,42 +76,75 @@ function ContentComponent(props: ContentProps) {
     )
   );
 
-  const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
-    strictStyleMode: props.strictStyleMode,
-    content: getContentInitialValue({
-      content: props.content,
-      data: props.data,
-    }),
-    localState: undefined,
-    rootState: getRootStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale,
-    }),
-    rootSetState: contentSetState,
-    context: props.context || {},
-    canTrack: props.canTrack,
-    apiKey: props.apiKey,
-    apiVersion: props.apiVersion,
-    componentInfos: [
-      ...getDefaultRegisteredComponents(),
-      ...(props.customComponents?.filter(({ models }) => {
-        if (!models?.length) return true;
-        if (!props.model) return true;
-        return models.includes(props.model);
-      }) || []),
-    ].reduce<Dictionary<ComponentInfo>>(
-      (acc, { component: _, ...info }) => ({
-        ...acc,
-        [info.name]: serializeIncludingFunctions(info),
+  const [builderContextSignal, setBuilderContextSignal] =
+    useState<BuilderContextInterface>(() => ({
+      strictStyleMode: props.strictStyleMode,
+      content: getContentInitialValue({
+        content: props.content,
+        data: props.data,
       }),
-      {}
-    ),
-    inheritedStyles: {},
-    BlocksWrapper: props.blocksWrapper || ScrollView,
-    BlocksWrapperProps: props.blocksWrapperProps || {},
-    nonce: props.nonce || "",
-  }));
+      localState: undefined,
+      rootState: getRootStateInitialValue({
+        content: props.content,
+        data: props.data,
+        locale: props.locale,
+      }),
+      rootSetState: contentSetState,
+      context: props.context || {},
+      canTrack: props.canTrack,
+      apiKey: props.apiKey,
+      apiVersion: props.apiVersion,
+      componentInfos: [
+        ...getDefaultRegisteredComponents(),
+        ...(props.customComponents?.filter(({ models }) => {
+          if (!models?.length) return true;
+          if (!props.model) return true;
+          return models.includes(props.model);
+        }) || []),
+      ].reduce<Dictionary<ComponentInfo>>(
+        (acc, { component: _, ...info }) => ({
+          ...acc,
+          [info.name]: serializeIncludingFunctions(info),
+        }),
+        {}
+      ),
+      inheritedStyles: {},
+      BlocksWrapper: props.blocksWrapper || ScrollView,
+      BlocksWrapperProps: props.blocksWrapperProps || {},
+      nonce: props.nonce || "",
+    }));
+
+  const hasInitialized = useRef(false);
+  if (!hasInitialized.current) {
+    if (!props.apiKey) {
+      logger.error(
+        "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      );
+    }
+
+    // run any dynamic JS code attached to content
+    const jsCode = builderContextSignal.content?.data?.jsCode;
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: props.context || {},
+        localState: undefined,
+        rootState: builderContextSignal.rootState,
+        rootSetState: (newState) => {
+          setBuilderContextSignal((PREVIOUS_VALUE) => ({
+            ...PREVIOUS_VALUE,
+            rootState: newState,
+          }));
+        },
+        isExpression: false,
+        /**
+         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
+         */
+        enableCache: false,
+      });
+    }
+    hasInitialized.current = true;
+  }
 
   return (
     <ComponentsContext.Provider

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.15"
+export const SDK_VERSION = "2.0.21"

package/src/context/component-reference-types.ts

@@ -0,0 +1,4 @@
+/**
+ * To be overriden to the correct `Component` type for each framework.
+ */
+export type ComponentReference = any

package/src/context/types.ts

@@ -3,9 +3,10 @@ import type { ApiVersion } from '../types/api-version';
 import type { BuilderContent } from '../types/builder-content';
 import type { ComponentInfo } from '../types/components';
 import type { Dictionary, Nullable } from '../types/typescript';
+import type { ComponentReference } from './component-reference-types';
 import type { ExtraContextTypes } from './extra-context-types';
 export type RegisteredComponent = ComponentInfo & {
-  component: any;
+  component: ComponentReference;
 };
 export type RegisteredComponents = Dictionary<RegisteredComponent>;
 export type BuilderRenderState = Record<string, unknown>;

package/src/functions/evaluate/browser-runtime/browser.ts

@@ -1,6 +1,5 @@
-import type { BuilderRenderState } from '../../../context/types';
 import type { ExecutorArgs } from '../helpers';
-import { getFunctionArguments } from '../helpers';
+import { flattenState, getFunctionArguments } from '../helpers';
 export const runInBrowser = ({
   code,
   builder,
@@ -21,41 +20,4 @@ export const runInBrowser = ({
     })
   });
   return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
-};
-export function flattenState({
-  rootState,
-  localState,
-  rootSetState
-}: {
-  rootState: Record<string | symbol, any>;
-  localState: Record<string | symbol, any> | undefined;
-  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
-}): BuilderRenderState {
-  return new Proxy(rootState, {
-    get: (target, prop) => {
-      if (localState && prop in localState) {
-        return localState[prop];
-      }
-      const val = target[prop];
-      if (typeof val === 'object' && val !== null) {
-        return flattenState({
-          rootState: val,
-          localState: undefined,
-          rootSetState: rootSetState ? subState => {
-            target[prop] = subState;
-            rootSetState(target);
-          } : undefined
-        });
-      }
-      return val;
-    },
-    set: (target, prop, value) => {
-      if (localState && prop in localState) {
-        throw new Error('Writing to local state is not allowed as it is read-only.');
-      }
-      target[prop] = value;
-      rootSetState?.(target);
-      return true;
-    }
-  });
 }

package/src/functions/evaluate/choose-eval.ts

@@ -24,4 +24,6 @@ import { shouldForceBrowserRuntimeInNode } from './should-force-browser-runtime-
  * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
  * end up sending the server runtime code to the browser (most notably in dev mode).
  */
-export const chooseBrowserOrServerEval = (args: ExecutorArgs) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : evaluator(args)
+export const chooseBrowserOrServerEval = (args: ExecutorArgs) => isBrowser() || shouldForceBrowserRuntimeInNode({
+  shouldLogWarning: true
+}) ? runInBrowser(args) : evaluator(args)

package/src/functions/evaluate/edge-runtime/edge-runtime.ts

@@ -1,26 +1,66 @@
 import { logger } from '../../../helpers/logger';
-import { set } from '../../set';
 import type { ExecutorArgs } from '../helpers';
-import { getFunctionArguments } from '../helpers';
+import { flattenState, getFunctionArguments } from '../helpers';
 import Interpreter from './acorn-interpreter';
-const processCode = (code: string) => {
-  return code.split('\n').map(line => {
-    const trimmed = line.trim();
-
-    // this async wrapper doesn't work in JS-interpreter, so we drop it.
-    if (line.includes('__awaiter')) return undefined;
 
-    // we find all state setter expressions and append a call to setRootState afterwards
-    const isStateSetter = trimmed.startsWith('state.');
-    if (!isStateSetter) return line;
-    const [lhs, rhs] = trimmed.split('=');
-    const setStr = lhs.replace('state.', '').trim();
-    const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
-    return `
-  ${line}
-  ${setExpr}
-  `;
-  }).filter(Boolean).join('\n');
+/**
+ * https://stackoverflow.com/a/46503625
+ */
+function patchInterpreter() {
+  const originalGetProperty = Interpreter.prototype.getProperty;
+  const originalSetProperty = Interpreter.prototype.setProperty;
+  function newGetProperty(this: typeof Interpreter, obj: any, name: any) {
+    if (obj == null || !obj._connected) {
+      return originalGetProperty.call(this, obj, name);
+    }
+    const value = obj._connected[name];
+    if (Array.isArray(value)) {
+      return this.nativeToPseudo(value);
+    }
+    if (typeof value === 'object') {
+      // if the value is an object itself, create another connected object
+      return this.createConnectedObject(value);
+    }
+    return value;
+  }
+  function newSetProperty(this: typeof Interpreter, obj: any, name: any, value: any, opt_descriptor: any) {
+    if (obj == null || !obj._connected) {
+      return originalSetProperty.call(this, obj, name, value, opt_descriptor);
+    }
+    obj._connected[name] = this.pseudoToNative(value);
+  }
+  const getKeys: string[] = [];
+  const setKeys: string[] = [];
+  for (const key of Object.keys(Interpreter.prototype)) {
+    if (Interpreter.prototype[key] === originalGetProperty) {
+      getKeys.push(key);
+    }
+    if (Interpreter.prototype[key] === originalSetProperty) {
+      setKeys.push(key);
+    }
+  }
+  for (const key of getKeys) {
+    Interpreter.prototype[key] = newGetProperty;
+  }
+  for (const key of setKeys) {
+    Interpreter.prototype[key] = newSetProperty;
+  }
+  Interpreter.prototype.createConnectedObject = function (obj: any) {
+    const connectedObject = this.createObject(this.OBJECT);
+    connectedObject._connected = obj;
+    return connectedObject;
+  };
+}
+patchInterpreter();
+const processCode = (code: string) => {
+  return code
+  // strip async/await polyfill: remove anything before 'function main()'
+  .replace(/^.*?function main\(\)/, `
+var __awaiter = function (e, t, n, r) {return r()},
+__generator = function (e, t) { return t() };
+function main()`)
+  // replace ?. with .
+  .replace(/\?\./g, '.');
 };
 const getJSONValName = (val: string) => val + 'JSON';
 export const runInEdge = ({
@@ -32,10 +72,11 @@ export const runInEdge = ({
   rootSetState,
   code
 }: ExecutorArgs) => {
-  const state = {
-    ...rootState,
-    ...localState
-  };
+  const state = flattenState({
+    rootState,
+    localState,
+    rootSetState
+  });
   const properties = getFunctionArguments({
     builder,
     context,
@@ -48,6 +89,9 @@ export const runInEdge = ({
    */
   const prependedCode = properties.map(([key]) => {
     const jsonValName = getJSONValName(key);
+    if (key === 'state') {
+      return ``;
+    }
     return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
   }).join('\n');
   const cleanedCode = processCode(code);
@@ -63,24 +107,18 @@ function theFunction() {
 }
 theFunction();
 `;
-  const setRootState = (prop: string, value: any) => {
-    const newState = set(state, prop, value);
-    rootSetState?.(newState);
-  };
   const initFunc = function (interpreter: any, globalObject: any) {
     /**
      * serialize all function args to JSON strings
      */
     properties.forEach(([key, val]) => {
-      const jsonVal = JSON.stringify(val);
-      interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+      if (key === 'state') {
+        interpreter.setProperty(globalObject, key, interpreter.createConnectedObject(val), interpreter.READONLY_DESCRIPTOR);
+      } else {
+        const jsonVal = JSON.stringify(val);
+        interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+      }
     });
-
-    /**
-     * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
-     * state property is set. This function will update the state object.
-     */
-    interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
   };
   const myInterpreter = new Interpreter(transformed, initFunc);
   myInterpreter.run();

package/src/functions/evaluate/helpers.ts

@@ -53,4 +53,41 @@ export const parseCode = (code: string, {
   isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
   const useCode = useReturn ? `return (${code});` : code;
   return useCode;
+};
+export function flattenState({
+  rootState,
+  localState,
+  rootSetState
+}: {
+  rootState: Record<string | symbol, any>;
+  localState: Record<string | symbol, any> | undefined;
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+}): BuilderRenderState {
+  return new Proxy(rootState, {
+    get: (target, prop) => {
+      if (localState && prop in localState) {
+        return localState[prop];
+      }
+      const val = target[prop];
+      if (typeof val === 'object' && val !== null) {
+        return flattenState({
+          rootState: val,
+          localState: undefined,
+          rootSetState: rootSetState ? subState => {
+            target[prop] = subState;
+            rootSetState(target);
+          } : undefined
+        });
+      }
+      return val;
+    },
+    set: (target, prop, value) => {
+      if (localState && prop in localState) {
+        throw new Error('Writing to local state is not allowed as it is read-only.');
+      }
+      target[prop] = value;
+      rootSetState?.(target);
+      return true;
+    }
+  });
 }

package/src/functions/evaluate/node-runtime/init.ts

@@ -1,3 +1,4 @@
+import { shouldForceBrowserRuntimeInNode } from '../should-force-browser-runtime-in-node';
 /**
  * This file:
  * - imports `isolated-vm`, which can only be made from a file that never runs
@@ -27,6 +28,14 @@ import type { IsolateOptions } from 'isolated-vm';
 export const initializeNodeRuntime = (args?: {
   ivmIsolateOptions?: IsolateOptions;
 }) => {
+  /**
+   * skip initialization if we are on an arm64 machine and running node 20
+   */
+  if (shouldForceBrowserRuntimeInNode({
+    shouldLogWarning: true
+  })) {
+    return;
+  }
   const {
     ivmIsolateOptions
   } = args || {};

package/src/functions/evaluate/node-runtime/node-runtime.ts

@@ -80,7 +80,7 @@ export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
 };
 
 // only mention the script for SDKs that have it.
-const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik';
+const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik' || SDK_NAME === '@builder.io/sdk-vue';
 const getIvm = (): IsolatedVMImport => {
   try {
     if (IVM_INSTANCE) return IVM_INSTANCE;

package/src/functions/evaluate/should-force-browser-runtime-in-node.ts

@@ -1,15 +1,21 @@
 import { logger } from '../../helpers/logger';
 import { isNodeRuntime } from '../is-node-runtime';
-export const shouldForceBrowserRuntimeInNode = () => {
+export const shouldForceBrowserRuntimeInNode = ({
+  shouldLogWarning
+}: {
+  shouldLogWarning: boolean;
+}) => {
   if (!isNodeRuntime()) return false;
   const isArm64 = process.arch === 'arm64';
   const isNode20 = process.version.startsWith('v20');
   const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
   if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-    logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
+    if (shouldLogWarning) {
+      logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
     See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
     `);
+    }
     return true;
   }
   return false;