@builder.io/sdk-solid 0.14.6 → 1.0.13

package/lib/browser/dev.jsx

@@ -71,7 +71,7 @@ function Button(props) {
 var button_default = Button;
 
 // src/blocks/columns/columns.tsx
-import { Show as Show6, For as For4, createSignal as createSignal5 } from "solid-js";
+import { Show as Show6, For as For4, createSignal as createSignal6, createMemo as createMemo6 } from "solid-js";
 import { css as css2 } from "solid-styled-components";
 
 // src/components/blocks/blocks.tsx
@@ -99,7 +99,7 @@ import { createContext as createContext2 } from "solid-js";
 var components_context_default = createContext2({ registeredComponents: {} });
 
 // src/components/block/block.tsx
-import { Show as Show4, For as For2, onMount, createSignal as createSignal4 } from "solid-js";
+import { Show as Show4, For as For2, onMount, createMemo as createMemo4 } from "solid-js";
 
 // src/functions/get-block-component-options.ts
 function getBlockComponentOptions(block) {
@@ -268,7 +268,7 @@ function flattenState({
         return localState[prop];
       }
       const val = target[prop];
-      if (typeof val === "object") {
+      if (typeof val === "object" && val !== null) {
         return flattenState({
           rootState: val,
           localState: void 0,
@@ -320,6 +320,30 @@ var shouldForceBrowserRuntimeInNode = () => {
 var chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : runInBrowser(args);
 
 // src/functions/evaluate/evaluate.ts
+var EvalCache = class _EvalCache {
+  static cacheLimit = 20;
+  static cache = /* @__PURE__ */ new Map();
+  static getCacheKey(args) {
+    return JSON.stringify({
+      ...args,
+      // replace the event with a random number to break cache
+      // thats because we can't serialize the event object due to circular refs in DOM node refs.
+      event: args.event ? Math.random() : void 0
+    });
+  }
+  static getCachedValue(key) {
+    const cachedVal = _EvalCache.cache.get(key);
+    return cachedVal;
+  }
+  static setCachedValue(key, value) {
+    if (_EvalCache.cache.size > 20) {
+      _EvalCache.cache.delete(_EvalCache.cache.keys().next().value);
+    }
+    _EvalCache.cache.set(key, {
+      value
+    });
+  }
+};
 function evaluate({
   code,
   context,
@@ -327,11 +351,12 @@ function evaluate({
   rootState,
   rootSetState,
   event,
-  isExpression = true
+  isExpression = true,
+  enableCache
 }) {
   if (code === "") {
     logger.warn("Skipping evaluation of empty code block.");
-    return;
+    return void 0;
   }
   const args = {
     code: parseCode(code, {
@@ -344,8 +369,20 @@ function evaluate({
     rootState,
     localState
   };
+  if (enableCache) {
+    const cacheKey = EvalCache.getCacheKey(args);
+    const cachedValue = EvalCache.getCachedValue(cacheKey);
+    if (cachedValue) {
+      return cachedValue.value;
+    }
+  }
   try {
-    return chooseBrowserOrServerEval(args);
+    const newEval = chooseBrowserOrServerEval(args);
+    if (enableCache) {
+      const cacheKey = EvalCache.getCacheKey(args);
+      EvalCache.setCachedValue(cacheKey, newEval);
+    }
+    return newEval;
   } catch (e) {
     logger.error("Failed code evaluation: " + e.message, {
       code
@@ -400,7 +437,8 @@ var evaluateBindings = ({
       localState,
       rootState,
       rootSetState,
-      context
+      context,
+      enableCache: true
     });
     set(copied, binding, value);
   }
@@ -634,6 +672,70 @@ function bindScrollInViewAnimation(animation) {
   });
 }
 
+// src/functions/camel-to-kebab-case.ts
+var camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+
+// src/helpers/css.ts
+var convertStyleMapToCSSArray = (style) => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${camelToKebabCase(key)}: ${value};`;
+    } else {
+      return void 0;
+    }
+  });
+  return cssProps.filter(checkIsDefined);
+};
+var convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
+var createCssClass = ({
+  mediaQuery,
+  className,
+  styles
+}) => {
+  const cssClass = `.${className} {
+    ${convertStyleMapToCSS(styles)}
+  }`;
+  if (mediaQuery) {
+    return `${mediaQuery} {
+      ${cssClass}
+    }`;
+  } else {
+    return cssClass;
+  }
+};
+
+// src/functions/transform-style-property.ts
+function transformStyleProperty({
+  style
+}) {
+  return style;
+}
+
+// src/functions/get-style.ts
+var getStyle = ({
+  block,
+  context
+}) => {
+  return mapStyleObjToStrIfNeeded(transformStyleProperty({
+    style: block.style || {},
+    context,
+    block
+  }));
+};
+function mapStyleObjToStrIfNeeded(style) {
+  switch (TARGET) {
+    case "svelte":
+    case "vue":
+    case "solid":
+      return convertStyleMapToCSSArray(style).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+    case "rsc":
+      return style;
+  }
+}
+
 // src/components/block/block.helpers.ts
 var getComponent = ({
   block,
@@ -677,7 +779,8 @@ var getRepeatItemData = ({
     localState: context.localState,
     rootState: context.rootState,
     rootSetState: context.rootSetState,
-    context: context.context
+    context: context.context,
+    enableCache: true
   });
   if (!Array.isArray(itemsArray)) {
     return void 0;
@@ -701,7 +804,7 @@ var getRepeatItemData = ({
 };
 
 // src/components/block/components/block-styles.tsx
-import { Show as Show2 } from "solid-js";
+import { Show as Show2, createMemo } from "solid-js";
 
 // src/constants/device-sizes.ts
 var SIZES = {
@@ -752,38 +855,6 @@ var getSizesForBreakpoints = ({
   return newSizes;
 };
 
-// src/functions/camel-to-kebab-case.ts
-var camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-
-// src/helpers/css.ts
-var convertStyleMapToCSSArray = (style) => {
-  const cssProps = Object.entries(style).map(([key, value]) => {
-    if (typeof value === "string") {
-      return `${camelToKebabCase(key)}: ${value};`;
-    } else {
-      return void 0;
-    }
-  });
-  return cssProps.filter(checkIsDefined);
-};
-var convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
-var createCssClass = ({
-  mediaQuery,
-  className,
-  styles
-}) => {
-  const cssClass = `.${className} {
-    ${convertStyleMapToCSS(styles)}
-  }`;
-  if (mediaQuery) {
-    return `${mediaQuery} {
-      ${cssClass}
-    }`;
-  } else {
-    return cssClass;
-  }
-};
-
 // src/components/inlined-styles.tsx
 function InlinedStyles(props) {
   return <style innerHTML={props.styles} id={props.id} />;
@@ -792,7 +863,7 @@ var Inlined_styles_default = InlinedStyles;
 
 // src/components/block/components/block-styles.tsx
 function BlockStyles(props) {
-  function canShowBlock() {
+  const canShowBlock = createMemo(() => {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -808,8 +879,8 @@ function BlockStyles(props) {
       return processedBlock.show;
     }
     return true;
-  }
-  function css5() {
+  });
+  const css5 = createMemo(() => {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -851,7 +922,7 @@ function BlockStyles(props) {
       )
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
-  }
+  });
   return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default styles={css5()} /></Show2>;
 }
 var Block_styles_default = BlockStyles;
@@ -870,7 +941,8 @@ var createEventHandler = (value, options) => (event) => evaluate({
   rootState: options.rootState,
   rootSetState: options.rootSetState,
   event,
-  isExpression: false
+  isExpression: false,
+  enableCache: true
 });
 
 // src/functions/get-block-actions.ts
@@ -898,38 +970,6 @@ function getBlockActions(options) {
   return obj;
 }
 
-// src/functions/transform-style-property.ts
-function transformStyleProperty({
-  style
-}) {
-  return style;
-}
-
-// src/functions/get-style.ts
-var getStyle = ({
-  block,
-  context
-}) => {
-  return mapStyleObjToStrIfNeeded(transformStyleProperty({
-    style: block.style || {},
-    context,
-    block
-  }));
-};
-function mapStyleObjToStrIfNeeded(style) {
-  switch (TARGET) {
-    case "svelte":
-    case "vue":
-    case "solid":
-      return convertStyleMapToCSSArray(style).join(" ");
-    case "qwik":
-    case "reactNative":
-    case "react":
-    case "rsc":
-      return style;
-  }
-}
-
 // src/functions/transform-block-properties.ts
 function transformBlockProperties({
   properties
@@ -1089,21 +1129,20 @@ var Repeated_block_default = RepeatedBlock;
 
 // src/components/block/block.tsx
 function Block(props) {
-  const [childrenContext, setChildrenContext] = createSignal4(props.context);
-  function blockComponent() {
+  const blockComponent = createMemo4(() => {
     return getComponent({
       block: props.block,
       context: props.context,
       registeredComponents: props.registeredComponents
     });
-  }
-  function repeatItem() {
+  });
+  const repeatItem = createMemo4(() => {
     return getRepeatItemData({
       block: props.block,
       context: props.context
     });
-  }
-  function processedBlock() {
+  });
+  const processedBlock = createMemo4(() => {
     return props.block.repeat?.collection ? props.block : getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -1112,15 +1151,15 @@ function Block(props) {
       context: props.context.context,
       shouldEvaluateBindings: true
     });
-  }
-  function Tag() {
+  });
+  const Tag = createMemo4(() => {
     const shouldUseLink = props.block.tagName === "a" || processedBlock().properties?.href || processedBlock().href;
     if (shouldUseLink) {
       return props.linkComponent || "a";
     }
     return props.block.tagName || "div";
-  }
-  function canShowBlock() {
+  });
+  const canShowBlock = createMemo4(() => {
     if (props.block.repeat?.collection) {
       if (repeatItem()?.length)
         return true;
@@ -1129,12 +1168,12 @@ function Block(props) {
     const shouldHide = "hide" in processedBlock() ? processedBlock().hide : false;
     const shouldShow = "show" in processedBlock() ? processedBlock().show : true;
     return shouldShow && !shouldHide;
-  }
-  function childrenWithoutParentComponent() {
+  });
+  const childrenWithoutParentComponent = createMemo4(() => {
     const shouldRenderChildrenOutsideRef = !blockComponent()?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? processedBlock().children ?? [] : [];
-  }
-  function componentRefProps() {
+  });
+  const componentRefProps = createMemo4(() => {
     return {
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent()?.component,
@@ -1148,14 +1187,14 @@ function Block(props) {
           builderComponents: props.registeredComponents
         } : {}
       },
-      context: childrenContext(),
+      context: props.context,
       linkComponent: props.linkComponent,
       registeredComponents: props.registeredComponents,
       builderBlock: processedBlock(),
       includeBlockProps: blockComponent()?.noWrap === true,
       isInteractive: !blockComponent()?.isRSC
     };
-  }
+  });
   onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
@@ -1217,9 +1256,9 @@ function Block(props) {
         return <Block
           key={child.id}
           block={child}
-          context={childrenContext()}
           registeredComponents={props.registeredComponents}
           linkComponent={props.linkComponent}
+          context={props.context}
         />;
       }}</For2>
     </Block_wrapper_default></Show4></Show4>
@@ -1228,12 +1267,13 @@ function Block(props) {
 var Block_default = Block;
 
 // src/components/blocks/blocks-wrapper.tsx
+import { createMemo as createMemo5 } from "solid-js";
 import { Dynamic as Dynamic4 } from "solid-js/web";
 import { css } from "solid-styled-components";
 function BlocksWrapper(props) {
-  function className() {
+  const className = createMemo5(() => {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-  }
+  });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage(
@@ -1307,12 +1347,12 @@ var Blocks_default = Blocks;
 
 // src/blocks/columns/columns.tsx
 function Columns(props) {
-  const [gutterSize, setGutterSize] = createSignal5(
+  const [gutterSize, setGutterSize] = createSignal6(
     typeof props.space === "number" ? props.space || 0 : 20
   );
-  const [cols, setCols] = createSignal5(props.columns || []);
-  const [stackAt, setStackAt] = createSignal5(props.stackColumnsAt || "tablet");
-  const [flexDir, setFlexDir] = createSignal5(
+  const [cols, setCols] = createSignal6(props.columns || []);
+  const [stackAt, setStackAt] = createSignal6(props.stackColumnsAt || "tablet");
+  const [flexDir, setFlexDir] = createSignal6(
     props.stackColumnsAt === "never" ? "row" : props.reverseColumnsWhenStacked ? "column-reverse" : "column"
   );
   function getWidth(index) {
@@ -1334,7 +1374,7 @@ function Columns(props) {
   }) {
     return stackAt() === "never" ? desktopStyle : stackedStyle;
   }
-  function columnsCssVars() {
+  const columnsCssVars = createMemo6(() => {
     return {
       "--flex-dir": flexDir(),
       "--flex-dir-tablet": getTabletStyle({
@@ -1342,7 +1382,7 @@ function Columns(props) {
         desktopStyle: "row"
       })
     };
-  }
+  });
   function columnCssVars(index) {
     const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
@@ -1383,7 +1423,7 @@ function Columns(props) {
     );
     return breakpointSizes[size].max;
   }
-  function columnsStyles() {
+  const columnsStyles = createMemo6(() => {
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1409,7 +1449,7 @@ function Columns(props) {
           }
         },
       `;
-  }
+  });
   return <div
     class={`builder-columns ${props.builderBlock.id}-breakpoints ` + css2({
       display: "flex",
@@ -1456,7 +1496,7 @@ function FragmentComponent(props) {
 var fragment_default = FragmentComponent;
 
 // src/blocks/image/image.tsx
-import { Show as Show7 } from "solid-js";
+import { Show as Show7, createMemo as createMemo7 } from "solid-js";
 import { css as css3 } from "solid-styled-components";
 
 // src/blocks/image/image.helpers.ts
@@ -1508,7 +1548,7 @@ function getSrcSet(url) {
 
 // src/blocks/image/image.tsx
 function Image(props) {
-  function srcSetToUse() {
+  const srcSetToUse = createMemo7(() => {
     const imageToUse = props.image || props.src;
     const url = imageToUse;
     if (!url || // We can auto add srcset for cdn.builder.io and shopify
@@ -1525,15 +1565,15 @@ function Image(props) {
       return getSrcSet(url);
     }
     return getSrcSet(url);
-  }
-  function webpSrcSet() {
+  });
+  const webpSrcSet = createMemo7(() => {
     if (srcSetToUse()?.match(/builder\.io/) && !props.noWebp) {
       return srcSetToUse().replace(/\?/g, "?format=webp&");
     } else {
       return "";
     }
-  }
-  function aspectRatioCss() {
+  });
+  const aspectRatioCss = createMemo7(() => {
     const aspectRatioStyles = {
       position: "absolute",
       height: "100%",
@@ -1543,7 +1583,7 @@ function Image(props) {
     };
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
-  }
+  });
   return <>
     <picture>
       <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
@@ -1616,10 +1656,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount5, on as on3, createEffect as createEffect3, createSignal as createSignal15 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo16, createSignal as createSignal16 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show12, For as For7, onMount as onMount4, createSignal as createSignal14 } from "solid-js";
+import { Show as Show12, For as For7, onMount as onMount4, createSignal as createSignal15, createMemo as createMemo15 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1813,7 +1853,7 @@ var handleABTesting = async ({
 var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
 
 // src/components/content/content.tsx
-import { Show as Show11, createSignal as createSignal13 } from "solid-js";
+import { Show as Show11, createSignal as createSignal14 } from "solid-js";
 
 // src/blocks/button/component-info.ts
 var componentInfo = {
@@ -2374,10 +2414,10 @@ var componentInfo9 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount as onMount2, createSignal as createSignal7 } from "solid-js";
+import { onMount as onMount2, createSignal as createSignal8 } from "solid-js";
 function CustomCode(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal7([]);
-  const [scriptsRun, setScriptsRun] = createSignal7([]);
+  const [scriptsInserted, setScriptsInserted] = createSignal8([]);
+  const [scriptsRun, setScriptsRun] = createSignal8([]);
   let elementRef;
   onMount2(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
@@ -2459,7 +2499,7 @@ var componentInfo10 = {
 };
 
 // src/blocks/embed/embed.tsx
-import { on, createEffect, createSignal as createSignal8 } from "solid-js";
+import { on, createEffect, createMemo as createMemo9, createSignal as createSignal9 } from "solid-js";
 
 // src/blocks/embed/helpers.ts
 var SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
@@ -2467,9 +2507,9 @@ var isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
 
 // src/blocks/embed/embed.tsx
 function Embed(props) {
-  const [scriptsInserted, setScriptsInserted] = createSignal8([]);
-  const [scriptsRun, setScriptsRun] = createSignal8([]);
-  const [ranInitFn, setRanInitFn] = createSignal8(false);
+  const [scriptsInserted, setScriptsInserted] = createSignal9([]);
+  const [scriptsRun, setScriptsRun] = createSignal9([]);
+  const [ranInitFn, setRanInitFn] = createSignal9(false);
   function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
       return;
@@ -2493,13 +2533,17 @@ function Embed(props) {
     }
   }
   let elem;
+  const onUpdateFn_0_elem = createMemo9(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo9(() => ranInitFn());
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
       findAndRunScripts();
     }
   }
-  createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
+  createEffect(
+    on(() => [onUpdateFn_0_elem(), onUpdateFn_0_ranInitFn__()], onUpdateFn_0)
+  );
   return <div class="builder-embed" ref={elem} innerHTML={props.content} />;
 }
 var embed_default = Embed;
@@ -2739,7 +2783,7 @@ var componentInfo11 = {
 };
 
 // src/blocks/form/form/form.tsx
-import { Show as Show8, For as For5, createSignal as createSignal9 } from "solid-js";
+import { Show as Show8, For as For5, createSignal as createSignal10 } from "solid-js";
 import { css as css4 } from "solid-styled-components";
 
 // src/functions/get-env.ts
@@ -2757,9 +2801,9 @@ var get = (obj, path, defaultValue) => {
 
 // src/blocks/form/form/form.tsx
 function FormComponent(props) {
-  const [formState, setFormState] = createSignal9("unsubmitted");
-  const [responseData, setResponseData] = createSignal9(null);
-  const [formErrorMessage, setFormErrorMessage] = createSignal9("");
+  const [formState, setFormState] = createSignal10("unsubmitted");
+  const [responseData, setResponseData] = createSignal10(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal10("");
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContext.rootState,
@@ -3275,9 +3319,9 @@ var componentInfo16 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show9 } from "solid-js";
+import { Show as Show9, createMemo as createMemo11 } from "solid-js";
 function Video(props) {
-  function videoProps() {
+  const videoProps = createMemo11(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -3295,12 +3339,12 @@ function Video(props) {
         playsInline: true
       } : {}
     };
-  }
-  function spreadProps() {
+  });
+  const spreadProps = createMemo11(() => {
     return {
       ...videoProps()
     };
-  }
+  });
   return <div
     style={{
       position: "relative"
@@ -3490,7 +3534,14 @@ function InlinedScript(props) {
 var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
-import { Show as Show10, onMount as onMount3, on as on2, createEffect as createEffect2, createSignal as createSignal11 } from "solid-js";
+import {
+  Show as Show10,
+  onMount as onMount3,
+  on as on2,
+  createEffect as createEffect2,
+  createMemo as createMemo12,
+  createSignal as createSignal12
+} from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
 // src/helpers/preview-lru-cache/get.ts
@@ -3978,7 +4029,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.14.6";
+var SDK_VERSION = "1.0.13";
 
 // src/functions/register.ts
 var registry = {};
@@ -4177,15 +4228,15 @@ var subscribeToEditor = (model, callback, options) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [forceReRenderCount, setForceReRenderCount] = createSignal11(0);
-  const [firstRender, setFirstRender] = createSignal11(true);
-  const [lastUpdated, setLastUpdated] = createSignal11(0);
-  const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal11(false);
-  const [ContentWrapper, setContentWrapper] = createSignal11(
+  const [forceReRenderCount, setForceReRenderCount] = createSignal12(0);
+  const [firstRender, setFirstRender] = createSignal12(true);
+  const [lastUpdated, setLastUpdated] = createSignal12(0);
+  const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal12(false);
+  const [ContentWrapper, setContentWrapper] = createSignal12(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal11({});
-  const [clicked, setClicked] = createSignal11(false);
+  const [httpReqsData, setHttpReqsData] = createSignal12({});
+  const [clicked, setClicked] = createSignal12(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -4256,7 +4307,11 @@ function EnableEditor(props) {
         context: props.context || {},
         localState: void 0,
         rootState: props.builderContextSignal.rootState,
-        rootSetState: props.builderContextSignal.rootSetState
+        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
       });
     }
   }
@@ -4281,13 +4336,16 @@ function EnableEditor(props) {
   function evalExpression(expression) {
     return expression.replace(
       /{{([^}]+)}}/g,
-      (_match, group) => evaluate({
-        code: group,
-        context: props.context || {},
-        localState: void 0,
-        rootState: props.builderContextSignal.rootState,
-        rootSetState: props.builderContextSignal.rootSetState
-      })
+      (_match, group) => String(
+        evaluate({
+          code: group,
+          context: props.context || {},
+          localState: void 0,
+          rootState: props.builderContextSignal.rootState,
+          rootSetState: props.builderContextSignal.rootSetState,
+          enableCache: true
+        })
+      )
     );
   }
   function handleRequest({ url, key }) {
@@ -4404,40 +4462,63 @@ function EnableEditor(props) {
     runHttpRequests();
     emitStateUpdate();
   });
+  const onUpdateFn_0_props_content = createMemo12(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
-  createEffect2(on2(() => [props.content], onUpdateFn_0));
+  createEffect2(on2(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
+  const onUpdateFn_1_shouldSendResetCookie__ = createMemo12(
+    () => shouldSendResetCookie()
+  );
   function onUpdateFn_1() {
   }
-  createEffect2(on2(() => [shouldSendResetCookie()], onUpdateFn_1));
+  createEffect2(
+    on2(() => [onUpdateFn_1_shouldSendResetCookie__()], onUpdateFn_1)
+  );
+  const onUpdateFn_2_props_builderContextSignal_content__data__jsCode = createMemo12(() => props.builderContextSignal.content?.data?.jsCode);
   function onUpdateFn_2() {
     evaluateJsCode();
   }
   createEffect2(
-    on2(() => [props.builderContextSignal.content?.data?.jsCode], onUpdateFn_2)
+    on2(
+      () => [onUpdateFn_2_props_builderContextSignal_content__data__jsCode()],
+      onUpdateFn_2
+    )
   );
+  const onUpdateFn_3_props_builderContextSignal_content__data__httpRequests = createMemo12(() => props.builderContextSignal.content?.data?.httpRequests);
   function onUpdateFn_3() {
     runHttpRequests();
   }
   createEffect2(
     on2(
-      () => [props.builderContextSignal.content?.data?.httpRequests],
+      () => [
+        onUpdateFn_3_props_builderContextSignal_content__data__httpRequests()
+      ],
       onUpdateFn_3
     )
   );
+  const onUpdateFn_4_props_builderContextSignal_rootState = createMemo12(
+    () => props.builderContextSignal.rootState
+  );
   function onUpdateFn_4() {
     emitStateUpdate();
   }
-  createEffect2(on2(() => [props.builderContextSignal.rootState], onUpdateFn_4));
+  createEffect2(
+    on2(
+      () => [onUpdateFn_4_props_builderContextSignal_rootState()],
+      onUpdateFn_4
+    )
+  );
+  const onUpdateFn_5_props_data = createMemo12(() => props.data);
   function onUpdateFn_5() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
-  createEffect2(on2(() => [props.data], onUpdateFn_5));
+  createEffect2(on2(() => [onUpdateFn_5_props_data()], onUpdateFn_5));
+  const onUpdateFn_6_props_locale = createMemo12(() => props.locale);
   function onUpdateFn_6() {
     if (props.locale) {
       mergeNewRootState({
@@ -4445,7 +4526,7 @@ function EnableEditor(props) {
       });
     }
   }
-  createEffect2(on2(() => [props.locale], onUpdateFn_6));
+  createEffect2(on2(() => [onUpdateFn_6_props_locale()], onUpdateFn_6));
   return <builder_context_default.Provider value={props.builderContextSignal}><Show10 when={props.builderContextSignal.content}><Dynamic5
     class={`variant-${props.content?.testVariationId || props.content?.id}`}
     {...{}}
@@ -4466,7 +4547,7 @@ function EnableEditor(props) {
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal12 } from "solid-js";
+import { createSignal as createSignal13 } from "solid-js";
 
 // src/components/content/components/styles.helpers.ts
 var getCssFromFont = (font) => {
@@ -4522,19 +4603,7 @@ var getCss = ({
   }
   return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
 };
-
-// src/components/content/components/styles.tsx
-function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal12(
-    `
-${getCss({
-      cssCode: props.cssCode,
-      contentId: props.contentId
-    })}
-${getFontCss({
-      customFonts: props.customFonts
-    })}
-
+var DEFAULT_STYLES = `
 .builder-button {
   all: unset;
 }
@@ -4551,6 +4620,23 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
+`;
+var getDefaultStyles = (isNested) => {
+  return !isNested ? DEFAULT_STYLES : "";
+};
+
+// src/components/content/components/styles.tsx
+function ContentStyles(props) {
+  const [injectedStyles, setInjectedStyles] = createSignal13(
+    `
+${getCss({
+      cssCode: props.cssCode,
+      contentId: props.contentId
+    })}
+${getFontCss({
+      customFonts: props.customFonts
+    })}
+${getDefaultStyles(props.isNestedRender)}
 `.trim()
   );
   return <Inlined_styles_default styles={injectedStyles()} />;
@@ -4595,7 +4681,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal13(
+  const [scriptStr, setScriptStr] = createSignal14(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -4603,7 +4689,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal13(
+  const [registeredComponents, setRegisteredComponents] = createSignal14(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -4618,7 +4704,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal13({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal14({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -4678,6 +4764,7 @@ function ContentComponent(props) {
   >
     <Show11 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show11>
     <Show11 when={TARGET !== "reactNative"}><Styles_default
+      isNestedRender={props.isNestedRender}
       contentId={builderContextSignal().content?.id}
       cssCode={builderContextSignal().content?.data?.cssCode}
       customFonts={builderContextSignal().content?.data?.customFonts}
@@ -4694,13 +4781,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal14(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal15(
     checkShouldRenderVariants({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  function updateCookieAndStylesScriptStr() {
+  const updateCookieAndStylesScriptStr = createMemo15(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -4708,11 +4795,11 @@ function ContentVariants(props) {
       })),
       props.content?.id || ""
     );
-  }
-  function hideVariantsStyleString() {
+  });
+  const hideVariantsStyleString = createMemo15(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
-  }
-  function defaultContent() {
+  });
+  const defaultContent = createMemo15(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -4720,12 +4807,12 @@ function ContentVariants(props) {
       item: props.content,
       canTrack: getDefaultCanTrack(props.canTrack)
     });
-  }
+  });
   onMount4(() => {
     setShouldRenderVariants(false);
   });
   return <>
-    <Show12 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
+    <Show12 when={!props.isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show12>
     <Show12 when={shouldRenderVariants()}>
       <Inlined_styles_default
         id={`variants-styles-${props.content?.id}`}
@@ -4737,6 +4824,7 @@ function ContentVariants(props) {
       <For7 each={getVariants(props.content)}>{(variant, _index) => {
         const index = _index();
         return <Content_default
+          isNestedRender={props.isNestedRender}
           key={variant.testVariationId}
           content={variant}
           showContent={false}
@@ -4760,6 +4848,7 @@ function ContentVariants(props) {
       }}</For7>
     </Show12>
     <Content_default
+      isNestedRender={props.isNestedRender}
       {...{}}
       content={defaultContent()}
       showContent={true}
@@ -4810,15 +4899,15 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(props) {
-  const [contentToUse, setContentToUse] = createSignal15(props.symbol?.content);
-  function className() {
+  const [contentToUse, setContentToUse] = createSignal16(props.symbol?.content);
+  const className = createMemo16(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
       props.symbol?.inline ? "builder-inline-symbol" : void 0,
       props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
     ].filter(Boolean).join(" ");
-  }
+  });
   function setContent() {
     if (contentToUse())
       return;
@@ -4832,14 +4921,14 @@ function Symbol(props) {
     });
   }
   onMount5(() => {
-    setContent();
   });
+  const onUpdateFn_0_props_symbol = createMemo16(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect3(on3(() => [props.symbol], onUpdateFn_0));
+  createEffect3(on3(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
-    __isNestedRender={true}
+    isNestedRender={true}
     apiVersion={props.builderContext.apiVersion}
     apiKey={props.builderContext.apiKey}
     context={{