@builder.io/sdk-solid 2.0.16 → 2.0.22

package/lib/node/dev.jsx

@@ -75,10 +75,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";
@@ -104,9 +104,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";
@@ -250,29 +250,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,
@@ -307,6 +284,29 @@ function flattenState({
   });
 }
 
+// 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/constants/sdk-name.ts
 var SDK_NAME_FOR_TARGET = (() => {
   switch (TARGET) {
@@ -401,7 +401,7 @@ if (typeof output === 'object' && output !== null) {
 };
 var IVM_INSTANCE = null;
 var IVM_CONTEXT = null;
-var SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === "@builder.io/sdk-react-nextjs" || SDK_NAME === "@builder.io/sdk-react" || SDK_NAME === "@builder.io/sdk-qwik";
+var 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";
 var getIvm = () => {
   try {
     if (IVM_INSTANCE)
@@ -1264,12 +1264,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 ? {
@@ -1286,11 +1297,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;
 
@@ -1332,7 +1351,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,
@@ -1353,7 +1372,7 @@ function ComponentRef(props) {
       registeredComponents={props.registeredComponents}
       linkComponent={props.linkComponent}
     />;
-  }}</For></Dynamic3></Show3></>;
+  }}</For></Dynamic3></Show4></>;
 }
 var Component_ref_default = ComponentRef;
 
@@ -1442,7 +1461,7 @@ function Block(props) {
       isInteractive: !(blockComponent()?.isRSC && TARGET === "rsc")
     };
   });
-  onMount(() => {
+  onMount2(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
     if (animations && blockId) {
@@ -1454,13 +1473,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
@@ -1482,9 +1501,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
@@ -1522,13 +1541,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(() => {
@@ -1563,11 +1582,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}
@@ -1579,7 +1598,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;
@@ -1599,7 +1618,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}
@@ -1608,7 +1627,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;
 
@@ -1739,15 +1758,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
@@ -1768,7 +1787,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-3ff242de {
+    <style>{`.div-46766f1c {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1783,7 +1802,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) {
@@ -1873,14 +1892,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}
@@ -1895,25 +1914,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;
@@ -1949,10 +1968,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) => {
@@ -2146,7 +2165,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 = {
@@ -2280,7 +2299,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) => {
@@ -2414,7 +2433,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
@@ -2424,7 +2443,7 @@ function Accordion(props) {
         context={props.builderContext}
         registeredComponents={props.builderComponents}
         linkComponent={props.builderLinkComponent}
-      /></div></Show8>
+      /></div></Show9>
     </>;
   }}</For5></div></>;
 }
@@ -3105,7 +3124,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
@@ -3147,14 +3166,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;
@@ -3243,12 +3262,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;
     }
@@ -3598,7 +3617,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"];
@@ -3813,7 +3832,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}`}
@@ -3822,23 +3841,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;
@@ -4190,7 +4209,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 {
@@ -4241,8 +4260,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={{
@@ -4251,15 +4270,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",
@@ -4271,7 +4290,7 @@ function Video(props) {
         width: "100%",
         height: "100%"
       }}
-    >{props.children}</div></Show11>
+    >{props.children}</div></Show12>
   </div></>;
 }
 var video_default = Video;
@@ -4416,8 +4435,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,
@@ -4924,7 +4943,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.16";
+var SDK_VERSION = "2.0.22";
 
 // src/functions/register.ts
 var registry = {};
@@ -5277,22 +5296,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;
@@ -5334,7 +5337,7 @@ function EnableEditor(props) {
           })
         )
       );
-      fetch2(evaluatedUrl).then((response) => response.json()).then((json) => {
+      fetch(evaluatedUrl).then((response) => response.json()).then((json) => {
         mergeNewRootState({
           [key]: json
         });
@@ -5364,7 +5367,9 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
-  onMount5(() => {
+  runHttpRequests();
+  emitStateUpdate();
+  onMount6(() => {
     if (isBrowser()) {
       if (isEditing()) {
         window.addEventListener("message", processMessage);
@@ -5425,16 +5430,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) {
@@ -5442,57 +5437,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
     )}
@@ -5505,7 +5478,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;
 
@@ -5642,6 +5615,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()
@@ -5665,18 +5663,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()}
@@ -5716,16 +5714,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()}
@@ -5763,7 +5761,7 @@ function ContentVariants(props) {
           {...{}}
         />;
       }}</For9>
-    </Show14>
+    </Show15>
     <Content_default
       nonce={props.nonce}
       isNestedRender={props.isNestedRender}
@@ -5844,7 +5842,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount7(() => {
+  onMount8(() => {
   });
   const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
   function onUpdateFn_0() {