@builder.io/sdk-solid 2.0.15 → 2.0.21

package/lib/edge/dev.jsx

@@ -83,10 +83,10 @@ function Button(props) {
 var button_default = Button;
 
 // src/blocks/columns/columns.tsx
-import { Show as Show6, For as For4, createSignal as createSignal7 } from "solid-js";
+import { Show as Show7, For as For4, createSignal as createSignal7 } from "solid-js";
 
 // src/components/blocks/blocks.tsx
-import { useContext, Show as Show5, For as For3 } from "solid-js";
+import { useContext, Show as Show6, For as For3 } from "solid-js";
 
 // src/context/builder.context.ts
 import { createContext } from "solid-js";
@@ -112,9 +112,9 @@ var components_context_default = createContext2({ registeredComponents: {} });
 
 // src/components/block/block.tsx
 import {
-  Show as Show4,
+  Show as Show5,
   For as For2,
-  onMount,
+  onMount as onMount2,
   createMemo as createMemo5,
   createSignal as createSignal5
 } from "solid-js";
@@ -258,29 +258,6 @@ var parseCode = (code, {
   const useCode = useReturn ? `return (${code});` : code;
   return useCode;
 };
-
-// src/functions/evaluate/browser-runtime/browser.ts
-var runInBrowser = ({
-  code,
-  builder,
-  context,
-  event,
-  localState,
-  rootSetState,
-  rootState
-}) => {
-  const functionArgs = getFunctionArguments({
-    builder,
-    context,
-    event,
-    state: flattenState({
-      rootState,
-      localState,
-      rootSetState
-    })
-  });
-  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
-};
 function flattenState({
   rootState,
   localState,
@@ -315,14 +292,27 @@ function flattenState({
   });
 }
 
-// src/functions/set.ts
-var set = (obj, _path, value) => {
-  if (Object(obj) !== obj) {
-    return obj;
-  }
-  const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
-  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
-  return obj;
+// src/functions/evaluate/browser-runtime/browser.ts
+var runInBrowser = ({
+  code,
+  builder,
+  context,
+  event,
+  localState,
+  rootSetState,
+  rootState
+}) => {
+  const functionArgs = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state: flattenState({
+      rootState,
+      localState,
+      rootSetState
+    })
+  });
+  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
 };
 
 // src/functions/evaluate/edge-runtime/acorn-interpreter.ts
@@ -3394,22 +3384,56 @@ t.VALUE_IN_DESCRIPTOR = Ia;
 var acorn_interpreter_default = t;
 
 // src/functions/evaluate/edge-runtime/edge-runtime.ts
+function patchInterpreter() {
+  const originalGetProperty = acorn_interpreter_default.prototype.getProperty;
+  const originalSetProperty = acorn_interpreter_default.prototype.setProperty;
+  function newGetProperty(obj, name) {
+    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") {
+      return this.createConnectedObject(value);
+    }
+    return value;
+  }
+  function newSetProperty(obj, name, value, opt_descriptor) {
+    if (obj == null || !obj._connected) {
+      return originalSetProperty.call(this, obj, name, value, opt_descriptor);
+    }
+    obj._connected[name] = this.pseudoToNative(value);
+  }
+  const getKeys = [];
+  const setKeys = [];
+  for (const key of Object.keys(acorn_interpreter_default.prototype)) {
+    if (acorn_interpreter_default.prototype[key] === originalGetProperty) {
+      getKeys.push(key);
+    }
+    if (acorn_interpreter_default.prototype[key] === originalSetProperty) {
+      setKeys.push(key);
+    }
+  }
+  for (const key of getKeys) {
+    acorn_interpreter_default.prototype[key] = newGetProperty;
+  }
+  for (const key of setKeys) {
+    acorn_interpreter_default.prototype[key] = newSetProperty;
+  }
+  acorn_interpreter_default.prototype.createConnectedObject = function(obj) {
+    const connectedObject = this.createObject(this.OBJECT);
+    connectedObject._connected = obj;
+    return connectedObject;
+  };
+}
+patchInterpreter();
 var processCode = (code) => {
-  return code.split("\n").map((line) => {
-    const trimmed = line.trim();
-    if (line.includes("__awaiter"))
-      return void 0;
-    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");
+  return code.replace(/^.*?function main\(\)/, `
+var __awaiter = function (e, t, n, r) {return r()},
+__generator = function (e, t) { return t() };
+function main()`).replace(/\?\./g, ".");
 };
 var getJSONValName = (val) => val + "JSON";
 var runInEdge = ({
@@ -3421,10 +3445,11 @@ var runInEdge = ({
   rootSetState,
   code
 }) => {
-  const state = {
-    ...rootState,
-    ...localState
-  };
+  const state = flattenState({
+    rootState,
+    localState,
+    rootSetState
+  });
   const properties = getFunctionArguments({
     builder,
     context,
@@ -3433,6 +3458,9 @@ var 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);
@@ -3448,16 +3476,15 @@ function theFunction() {
 }
 theFunction();
 `;
-  const setRootState = (prop, value) => {
-    const newState = set(state, prop, value);
-    rootSetState?.(newState);
-  };
   const initFunc = function(interpreter, globalObject) {
     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);
+      }
     });
-    interpreter.setProperty(globalObject, "setRootState", interpreter.createNativeFunction(setRootState));
   };
   const myInterpreter = new acorn_interpreter_default(transformed, initFunc);
   myInterpreter.run();
@@ -3474,24 +3501,30 @@ function isNodeRuntime() {
 }
 
 // src/functions/evaluate/should-force-browser-runtime-in-node.ts
-var shouldForceBrowserRuntimeInNode = () => {
+var shouldForceBrowserRuntimeInNode = ({
+  shouldLogWarning
+}) => {
   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;
 };
 
 // src/functions/evaluate/choose-eval.ts
-var chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : runInEdge(args);
+var chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode({
+  shouldLogWarning: true
+}) ? runInBrowser(args) : runInEdge(args);
 
 // src/functions/evaluate/evaluate.ts
 var DISABLE_CACHE = true;
@@ -3568,6 +3601,16 @@ function evaluate({
 // src/functions/fast-clone.ts
 var fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 
+// src/functions/set.ts
+var set = (obj, _path, value) => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
+  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+  return obj;
+};
+
 // src/functions/transform-block.ts
 function transformBlock(block) {
   return block;
@@ -4234,12 +4277,23 @@ function BlockWrapper(props) {
 var Block_wrapper_default = BlockWrapper;
 
 // src/components/block/components/component-ref/component-ref.tsx
-import { Show as Show3, For, createSignal as createSignal3 } from "solid-js";
+import { Show as Show4, For, createSignal as createSignal3 } from "solid-js";
 import { Dynamic as Dynamic3 } from "solid-js/web";
 
 // src/components/block/components/interactive-element.tsx
-import { createMemo as createMemo2 } from "solid-js";
+import { Show as Show3, createMemo as createMemo2 } from "solid-js";
 import { Dynamic as Dynamic2 } from "solid-js/web";
+
+// src/components/awaiter.tsx
+import { onMount } from "solid-js";
+function Awaiter(props) {
+  onMount(() => {
+  });
+  return <><>{props.children}</></>;
+}
+var Awaiter_default = Awaiter;
+
+// src/components/block/components/interactive-element.tsx
 function InteractiveElement(props) {
   const attributes = createMemo2(() => {
     return props.includeBlockProps ? {
@@ -4256,11 +4310,19 @@ function InteractiveElement(props) {
       })
     } : {};
   });
-  return <><Dynamic2
-    {...props.wrapperProps}
+  return <><Show3
+    fallback={<Dynamic2
+      {...props.wrapperProps}
+      attributes={attributes()}
+      component={props.Wrapper}
+    >{props.children}</Dynamic2>}
+    when={props.Wrapper.load}
+  ><Awaiter_default
+    load={props.Wrapper.load}
+    fallback={props.Wrapper.fallback}
+    props={props.wrapperProps}
     attributes={attributes()}
-    component={props.Wrapper}
-  >{props.children}</Dynamic2></>;
+  >{props.children}</Awaiter_default></Show3></>;
 }
 var interactive_element_default = InteractiveElement;
 
@@ -4302,7 +4364,7 @@ function ComponentRef(props) {
   const [Wrapper, setWrapper] = createSignal3(
     props.isInteractive ? interactive_element_default : props.componentRef
   );
-  return <><Show3 when={props.componentRef}><Dynamic3
+  return <><Show4 when={props.componentRef}><Dynamic3
     {...getWrapperProps({
       componentOptions: props.componentOptions,
       builderBlock: props.builderBlock,
@@ -4323,7 +4385,7 @@ function ComponentRef(props) {
       registeredComponents={props.registeredComponents}
       linkComponent={props.linkComponent}
     />;
-  }}</For></Dynamic3></Show3></>;
+  }}</For></Dynamic3></Show4></>;
 }
 var Component_ref_default = ComponentRef;
 
@@ -4412,7 +4474,7 @@ function Block(props) {
       isInteractive: !(blockComponent()?.isRSC && TARGET === "rsc")
     };
   });
-  onMount(() => {
+  onMount2(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
     if (animations && blockId) {
@@ -4424,13 +4486,13 @@ function Block(props) {
       );
     }
   });
-  return <><Show4 when={canShowBlock()}>
+  return <><Show5 when={canShowBlock()}>
     <Block_styles_default
       block={processedBlock()}
       context={props.context}
     />
-    <Show4
-      fallback={<Show4
+    <Show5
+      fallback={<Show5
         fallback={<For2 each={repeatItem()}>{(data, _index) => {
           const index = _index();
           return <Repeated_block_default
@@ -4452,9 +4514,9 @@ function Block(props) {
         builderBlock={componentRefProps().builderBlock}
         includeBlockProps={componentRefProps().includeBlockProps}
         isInteractive={componentRefProps().isInteractive}
-      /></Show4>}
+      /></Show5>}
       when={!blockComponent()?.noWrap}
-    ><Show4
+    ><Show5
       fallback={<For2 each={repeatItem()}>{(data, _index) => {
         const index = _index();
         return <Repeated_block_default
@@ -4492,13 +4554,13 @@ function Block(props) {
           context={props.context}
         />;
       }}</For2>
-    </Block_wrapper_default></Show4></Show4>
-  </Show4></>;
+    </Block_wrapper_default></Show5></Show5>
+  </Show5></>;
 }
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
-import { onMount as onMount2, createMemo as createMemo6 } from "solid-js";
+import { onMount as onMount3, createMemo as createMemo6 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 function BlocksWrapper(props) {
   const className = createMemo6(() => {
@@ -4533,11 +4595,11 @@ function BlocksWrapper(props) {
     }
   }
   let blocksWrapperRef;
-  onMount2(() => {
+  onMount3(() => {
   });
   return <>
     <Dynamic4
-      class={className() + " dynamic-4da8c6f4"}
+      class={className() + " dynamic-68b2d7fe"}
       ref={blocksWrapperRef}
       builder-path={props.path}
       builder-parent-id={props.parent}
@@ -4549,7 +4611,7 @@ function BlocksWrapper(props) {
       {...props.BlocksWrapperProps}
       component={props.BlocksWrapper}
     >{props.children}</Dynamic4>
-    <style>{`.dynamic-4da8c6f4 {
+    <style>{`.dynamic-68b2d7fe {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -4569,7 +4631,7 @@ function Blocks(props) {
     styleProp={props.styleProp}
     BlocksWrapper={props.context?.BlocksWrapper || builderContext.BlocksWrapper}
     BlocksWrapperProps={props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps}
-  ><Show5 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
+  ><Show6 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
     const index = _index();
     return <Block_default
       key={block.id}
@@ -4578,7 +4640,7 @@ function Blocks(props) {
       context={props.context || builderContext}
       registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
     />;
-  }}</For3></Show5></Blocks_wrapper_default></>;
+  }}</For3></Show6></Blocks_wrapper_default></>;
 }
 var Blocks_default = Blocks;
 
@@ -4709,15 +4771,15 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-3ff242de"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-46766f1c"}
       style={columnsCssVars()}
       {...{}}
     >
-      <Show6 when={TARGET !== "reactNative"}><Inlined_styles_default
+      <Show7 when={TARGET !== "reactNative"}><Inlined_styles_default
         id="builderio-columns"
         styles={columnsStyles()}
         nonce={props.builderContext.nonce}
-      /></Show6>
+      /></Show7>
       <For4 each={props.columns}>{(column, _index) => {
         const index = _index();
         return <Dynamic_renderer_default
@@ -4738,7 +4800,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-3ff242de {
+    <style>{`.div-46766f1c {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -4753,7 +4815,7 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show7, onMount as onMount3, createMemo as createMemo8 } from "solid-js";
+import { Show as Show8, onMount as onMount4, createMemo as createMemo8 } from "solid-js";
 
 // src/blocks/image/image.helpers.ts
 function removeProtocol(path) {
@@ -4843,14 +4905,14 @@ function Image(props) {
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
   });
-  onMount3(() => {
+  onMount4(() => {
   });
   return <>
     <>
       <picture>
-        <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
+        <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-4512e110"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-7e6ffddc"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -4865,25 +4927,25 @@ function Image(props) {
           sizes={props.sizes}
         />
       </picture>
-      <Show7
+      <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-4512e110"
+        class="builder-image-sizer div-7e6ffddc"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
-      /></Show7>
-      <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-4512e110-2">{props.children}</div></Show7>
+      /></Show8>
+      <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-7e6ffddc-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-4512e110 {
+    <style>{`.img-7e6ffddc {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-4512e110 {
+}.div-7e6ffddc {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-4512e110-2 {
+}.div-7e6ffddc-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -4919,10 +4981,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount7, on as on4, createEffect as createEffect4, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount8, on as on4, createEffect as createEffect4, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show14, For as For9, onMount as onMount6, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
+import { Show as Show15, For as For9, onMount as onMount7, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -5116,7 +5178,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show13, createSignal as createSignal18 } from "solid-js";
+import { Show as Show14, createSignal as createSignal18 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -5250,7 +5312,7 @@ var componentInfo = {
 };
 
 // src/blocks/accordion/accordion.tsx
-import { Show as Show8, For as For5, createSignal as createSignal9, createMemo as createMemo9 } from "solid-js";
+import { Show as Show9, For as For5, createSignal as createSignal9, createMemo as createMemo9 } from "solid-js";
 
 // src/blocks/accordion/helpers.ts
 var convertOrderNumberToString = (order) => {
@@ -5384,7 +5446,7 @@ function Accordion(props) {
         registeredComponents={props.builderComponents}
         linkComponent={props.builderLinkComponent}
       /></div>
-      <Show8 when={open().includes(index)}><div
+      <Show9 when={open().includes(index)}><div
         class={getAccordionDetailClassName(index)}
         style={accordionDetailStyles()}
       ><Blocks_default
@@ -5394,7 +5456,7 @@ function Accordion(props) {
         context={props.builderContext}
         registeredComponents={props.builderComponents}
         linkComponent={props.builderLinkComponent}
-      /></div></Show8>
+      /></div></Show9>
     </>;
   }}</For5></div></>;
 }
@@ -6075,7 +6137,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/tabs/tabs.tsx
-import { Show as Show9, For as For6, createSignal as createSignal10 } from "solid-js";
+import { Show as Show10, For as For6, createSignal as createSignal10 } from "solid-js";
 function Tabs(props) {
   const [activeTab, setActiveTab] = createSignal10(
     props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
@@ -6117,14 +6179,14 @@ function Tabs(props) {
         linkComponent={props.builderLinkComponent}
       /></span>;
     }}</For6></div>
-    <Show9 when={activeTabContent(activeTab())}><div><Blocks_default
+    <Show10 when={activeTabContent(activeTab())}><div><Blocks_default
       parent={props.builderBlock.id}
       path={`component.options.tabs.${activeTab()}.content`}
       blocks={activeTabContent(activeTab())}
       context={props.builderContext}
       registeredComponents={props.builderComponents}
       linkComponent={props.builderLinkComponent}
-    /></div></Show9>
+    /></div></Show10>
   </div></>;
 }
 var tabs_default = Tabs;
@@ -6213,12 +6275,12 @@ var componentInfo11 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount4, createSignal as createSignal12 } from "solid-js";
+import { onMount as onMount5, createSignal as createSignal12 } from "solid-js";
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal12([]);
   const [scriptsRun, setScriptsRun] = createSignal12([]);
   let elementRef;
-  onMount4(() => {
+  onMount5(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
       return;
     }
@@ -6568,7 +6630,7 @@ var componentInfo13 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show10, For as For7, createSignal as createSignal14 } from "solid-js";
+import { Show as Show11, For as For7, createSignal as createSignal14 } from "solid-js";
 
 // src/functions/get-env.ts
 var validEnvList = ["production", "qa", "test", "development", "dev", "cdn-qa", "cloud", "fast", "cdn2", "cdn-prod"];
@@ -6783,7 +6845,7 @@ function FormComponent(props) {
       {...{}}
       {...props.attributes}
     >
-      <Show10 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
+      <Show11 when={props.builderBlock && props.builderBlock.children}><For7 each={props.builderBlock?.children}>{(block, _index) => {
         const idx = _index();
         return <Block_default
           key={`form-block-${idx}`}
@@ -6792,23 +6854,23 @@ function FormComponent(props) {
           registeredComponents={props.builderComponents}
           linkComponent={props.builderLinkComponent}
         />;
-      }}</For7></Show10>
-      <Show10 when={submissionState() === "error"}><Blocks_default
+      }}</For7></Show11>
+      <Show11 when={submissionState() === "error"}><Blocks_default
         path="errorMessage"
         blocks={props.errorMessage}
         context={props.builderContext}
-      /></Show10>
-      <Show10 when={submissionState() === "sending"}><Blocks_default
+      /></Show11>
+      <Show11 when={submissionState() === "sending"}><Blocks_default
         path="sendingMessage"
         blocks={props.sendingMessage}
         context={props.builderContext}
-      /></Show10>
-      <Show10 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-2e825338">{JSON.stringify(responseData(), null, 2)}</pre></Show10>
-      <Show10 when={submissionState() === "success"}><Blocks_default
+      /></Show11>
+      <Show11 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-2e825338">{JSON.stringify(responseData(), null, 2)}</pre></Show11>
+      <Show11 when={submissionState() === "success"}><Blocks_default
         path="successMessage"
         blocks={props.successMessage}
         context={props.builderContext}
-      /></Show10>
+      /></Show11>
     </form>
     <style>{`.pre-2e825338 {
   padding: 10px;
@@ -7160,7 +7222,7 @@ var componentInfo19 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show11, createMemo as createMemo15 } from "solid-js";
+import { Show as Show12, createMemo as createMemo15 } from "solid-js";
 function Video(props) {
   const videoProps = createMemo15(() => {
     return {
@@ -7211,8 +7273,8 @@ function Video(props) {
       }}
       src={props.video || "no-src"}
       poster={props.posterImage}
-    ><Show11 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show11></video>
-    <Show11
+    ><Show12 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show12></video>
+    <Show12
       when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
     ><div
       style={{
@@ -7221,15 +7283,15 @@ function Video(props) {
         "pointer-events": "none",
         "font-size": "0px"
       }}
-    /></Show11>
-    <Show11 when={props.builderBlock?.children?.length && props.fitContent}><div
+    /></Show12>
+    <Show12 when={props.builderBlock?.children?.length && props.fitContent}><div
       style={{
         display: "flex",
         "flex-direction": "column",
         "align-items": "stretch"
       }}
-    >{props.children}</div></Show11>
-    <Show11 when={props.builderBlock?.children?.length && !props.fitContent}><div
+    >{props.children}</div></Show12>
+    <Show12 when={props.builderBlock?.children?.length && !props.fitContent}><div
       style={{
         "pointer-events": "none",
         display: "flex",
@@ -7241,7 +7303,7 @@ function Video(props) {
         width: "100%",
         height: "100%"
       }}
-    >{props.children}</div></Show11>
+    >{props.children}</div></Show12>
   </div></>;
 }
 var video_default = Video;
@@ -7386,8 +7448,8 @@ var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
 import {
-  Show as Show12,
-  onMount as onMount5,
+  Show as Show13,
+  onMount as onMount6,
   on as on3,
   createEffect as createEffect3,
   createMemo as createMemo16,
@@ -7894,7 +7956,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.15";
+var SDK_VERSION = "2.0.21";
 
 // src/functions/register.ts
 var registry = {};
@@ -8247,22 +8309,6 @@ function EnableEditor(props) {
       }
     })(event);
   }
-  function evaluateJsCode() {
-    const jsCode = props.builderContextSignal.content?.data?.jsCode;
-    if (jsCode) {
-      evaluate({
-        code: jsCode,
-        context: props.context || {},
-        localState: void 0,
-        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
-      });
-    }
-  }
   function onClick(event) {
     if (props.builderContextSignal.content) {
       const variationId = props.builderContextSignal.content?.testVariationId;
@@ -8304,7 +8350,7 @@ function EnableEditor(props) {
           })
         )
       );
-      fetch2(evaluatedUrl).then((response) => response.json()).then((json) => {
+      fetch(evaluatedUrl).then((response) => response.json()).then((json) => {
         mergeNewRootState({
           [key]: json
         });
@@ -8334,7 +8380,9 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
-  onMount5(() => {
+  runHttpRequests();
+  emitStateUpdate();
+  onMount6(() => {
     if (isBrowser()) {
       if (isEditing()) {
         window.addEventListener("message", processMessage);
@@ -8395,16 +8443,6 @@ function EnableEditor(props) {
       }
     }
   });
-  onMount5(() => {
-    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();
-  });
   const onUpdateFn_0_props_content = createMemo16(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
@@ -8412,57 +8450,35 @@ function EnableEditor(props) {
     }
   }
   createEffect3(on3(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo16(() => props.builderContextSignal.content?.data?.jsCode);
-  function onUpdateFn_1() {
-    evaluateJsCode();
-  }
-  createEffect3(
-    on3(
-      () => [onUpdateFn_1_props_builderContextSignal_content__data__jsCode()],
-      onUpdateFn_1
-    )
-  );
-  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo16(() => props.builderContextSignal.content?.data?.httpRequests);
-  function onUpdateFn_2() {
-    runHttpRequests();
-  }
-  createEffect3(
-    on3(
-      () => [
-        onUpdateFn_2_props_builderContextSignal_content__data__httpRequests()
-      ],
-      onUpdateFn_2
-    )
-  );
-  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo16(
+  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
     () => props.builderContextSignal.rootState
   );
-  function onUpdateFn_3() {
+  function onUpdateFn_1() {
     emitStateUpdate();
   }
   createEffect3(
     on3(
-      () => [onUpdateFn_3_props_builderContextSignal_rootState()],
-      onUpdateFn_3
+      () => [onUpdateFn_1_props_builderContextSignal_rootState()],
+      onUpdateFn_1
     )
   );
-  const onUpdateFn_4_props_data = createMemo16(() => props.data);
-  function onUpdateFn_4() {
+  const onUpdateFn_2_props_data = createMemo16(() => props.data);
+  function onUpdateFn_2() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
-  createEffect3(on3(() => [onUpdateFn_4_props_data()], onUpdateFn_4));
-  const onUpdateFn_5_props_locale = createMemo16(() => props.locale);
-  function onUpdateFn_5() {
+  createEffect3(on3(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
+  const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
+  function onUpdateFn_3() {
     if (props.locale) {
       mergeNewRootState({
         locale: props.locale
       });
     }
   }
-  createEffect3(on3(() => [onUpdateFn_5_props_locale()], onUpdateFn_5));
-  return <><builder_context_default.Provider value={props.builderContextSignal}><Show12 when={props.builderContextSignal.content}><Dynamic5
+  createEffect3(on3(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
+  return <><builder_context_default.Provider value={props.builderContextSignal}><Show13 when={props.builderContextSignal.content}><Dynamic5
     class={getWrapperClassName(
       props.content?.testVariationId || props.content?.id
     )}
@@ -8475,7 +8491,7 @@ function EnableEditor(props) {
     {...showContentProps()}
     {...props.contentWrapperProps}
     component={ContentWrapper()}
-  >{props.children}</Dynamic5></Show12></builder_context_default.Provider></>;
+  >{props.children}</Dynamic5></Show13></builder_context_default.Provider></>;
 }
 var Enable_editor_default = EnableEditor;
 
@@ -8612,6 +8628,31 @@ function ContentComponent(props) {
       rootState: newRootState
     }));
   }
+  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."
+    );
+  }
+  const jsCode = builderContextSignal().content?.data?.jsCode;
+  if (jsCode) {
+    evaluate({
+      code: jsCode,
+      context: props.context || {},
+      localState: void 0,
+      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
+    });
+  }
   return <><components_context_default.Provider
     value={{
       registeredComponents: registeredComponents()
@@ -8635,18 +8676,18 @@ function ContentComponent(props) {
       setBuilderContextSignal
     }}
   >
-    <Show13 when={props.isSsrAbTest}><Inlined_script_default
+    <Show14 when={props.isSsrAbTest}><Inlined_script_default
       id="builderio-variant-visibility"
       scriptStr={scriptStr()}
       nonce={props.nonce || ""}
-    /></Show13>
-    <Show13 when={TARGET !== "reactNative"}><Styles_default
+    /></Show14>
+    <Show14 when={TARGET !== "reactNative"}><Styles_default
       nonce={props.nonce || ""}
       isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
       customFonts={builderContextSignal().content?.data?.customFonts}
-    /></Show13>
+    /></Show14>
     <Blocks_default
       blocks={builderContextSignal().content?.data?.blocks}
       context={builderContextSignal()}
@@ -8686,16 +8727,16 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   });
-  onMount6(() => {
+  onMount7(() => {
     setShouldRenderVariants(false);
   });
   return <><>
-    <Show14 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
+    <Show15 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default
       id="builderio-init-variants-fns"
       scriptStr={getInitVariantsFnsScriptString()}
       nonce={props.nonce || ""}
-    /></Show14>
-    <Show14 when={shouldRenderVariants()}>
+    /></Show15>
+    <Show15 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id="builderio-variants"
         styles={hideVariantsStyleString()}
@@ -8733,7 +8774,7 @@ function ContentVariants(props) {
           {...{}}
         />;
       }}</For9>
-    </Show14>
+    </Show15>
     <Content_default
       nonce={props.nonce}
       isNestedRender={props.isNestedRender}
@@ -8814,7 +8855,7 @@ function Symbol2(props) {
       }
     });
   }
-  onMount7(() => {
+  onMount8(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {