@builder.io/sdk-solid 0.14.5 → 1.0.12

package/lib/browser/dev.js

@@ -1,5 +1,5 @@
 import { createComponent, spread, mergeProps, insert, effect, setAttribute, className, style, template, Dynamic, memo, use } from 'solid-js/web';
-import { createContext, useContext, Show, For, createSignal, onMount, createEffect, on } from 'solid-js';
+import { createContext, useContext, Show, For, createSignal, createMemo, onMount, createEffect, on } from 'solid-js';
 import { css } from 'solid-styled-components';
 
 // src/blocks/button/button.tsx
@@ -281,7 +281,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,
@@ -333,6 +333,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,
@@ -340,11 +364,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, {
@@ -357,8 +382,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
@@ -413,7 +450,8 @@ var evaluateBindings = ({
       localState,
       rootState,
       rootSetState,
-      context
+      context,
+      enableCache: true
     });
     set(copied, binding, value);
   }
@@ -647,6 +685,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,
@@ -690,7 +792,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;
@@ -761,38 +864,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;
-  }
-};
 var _tmpl$ = /* @__PURE__ */ template(`<style>`);
 function InlinedStyles(props) {
   return (() => {
@@ -813,7 +884,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,
@@ -829,8 +900,8 @@ function BlockStyles(props) {
       return processedBlock.show;
     }
     return true;
-  }
-  function css5() {
+  });
+  const css5 = createMemo(() => {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -864,7 +935,7 @@ function BlockStyles(props) {
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
-  }
+  });
   return createComponent(Show, {
     get when() {
       return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
@@ -894,7 +965,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
@@ -922,38 +994,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
@@ -1155,21 +1195,20 @@ var repeated_block_default = RepeatedBlock;
 
 // src/components/block/block.tsx
 function Block(props) {
-  const [childrenContext, setChildrenContext] = createSignal(props.context);
-  function blockComponent() {
+  const blockComponent = createMemo(() => {
     return getComponent({
       block: props.block,
       context: props.context,
       registeredComponents: props.registeredComponents
     });
-  }
-  function repeatItem() {
+  });
+  const repeatItem = createMemo(() => {
     return getRepeatItemData({
       block: props.block,
       context: props.context
     });
-  }
-  function processedBlock() {
+  });
+  const processedBlock = createMemo(() => {
     return props.block.repeat?.collection ? props.block : getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -1178,15 +1217,15 @@ function Block(props) {
       context: props.context.context,
       shouldEvaluateBindings: true
     });
-  }
-  function Tag() {
+  });
+  const Tag = createMemo(() => {
     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 = createMemo(() => {
     if (props.block.repeat?.collection) {
       if (repeatItem()?.length)
         return true;
@@ -1195,12 +1234,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 = createMemo(() => {
     const shouldRenderChildrenOutsideRef = !blockComponent()?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? processedBlock().children ?? [] : [];
-  }
-  function componentRefProps() {
+  });
+  const componentRefProps = createMemo(() => {
     return {
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent()?.component,
@@ -1214,14 +1253,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;
@@ -1363,14 +1402,14 @@ function Block(props) {
                           return child.id;
                         },
                         block: child,
-                        get context() {
-                          return childrenContext();
-                        },
                         get registeredComponents() {
                           return props.registeredComponents;
                         },
                         get linkComponent() {
                           return props.linkComponent;
+                        },
+                        get context() {
+                          return props.context;
                         }
                       });
                     }
@@ -1386,9 +1425,9 @@ function Block(props) {
 }
 var block_default = Block;
 function BlocksWrapper(props) {
-  function className() {
+  const className = createMemo(() => {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-  }
+  });
   function onClick() {
     if (isEditing() && !props.blocks?.length) {
       window.parent?.postMessage({
@@ -1528,7 +1567,7 @@ function Columns(props) {
   }) {
     return stackAt() === "never" ? desktopStyle : stackedStyle;
   }
-  function columnsCssVars() {
+  const columnsCssVars = createMemo(() => {
     return {
       "--flex-dir": flexDir(),
       "--flex-dir-tablet": getTabletStyle({
@@ -1536,7 +1575,7 @@ function Columns(props) {
         desktopStyle: "row"
       })
     };
-  }
+  });
   function columnCssVars(index) {
     const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
@@ -1575,7 +1614,7 @@ function Columns(props) {
     const breakpointSizes = getSizesForBreakpoints(props.builderContext.content?.meta?.breakpoints || {});
     return breakpointSizes[size].max;
   }
-  function columnsStyles() {
+  const columnsStyles = createMemo(() => {
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1601,7 +1640,7 @@ function Columns(props) {
           }
         },
       `;
-  }
+  });
   return (() => {
     const _el$ = _tmpl$2();
     spread(_el$, mergeProps({
@@ -1739,7 +1778,7 @@ var _tmpl$4 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$22 = /* @__PURE__ */ template(`<picture><img loading=lazy>`);
 var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
 function Image(props) {
-  function srcSetToUse() {
+  const srcSetToUse = createMemo(() => {
     const imageToUse = props.image || props.src;
     const url = imageToUse;
     if (!url || // We can auto add srcset for cdn.builder.io and shopify
@@ -1756,15 +1795,15 @@ function Image(props) {
       return getSrcSet(url);
     }
     return getSrcSet(url);
-  }
-  function webpSrcSet() {
+  });
+  const webpSrcSet = createMemo(() => {
     if (srcSetToUse()?.match(/builder\.io/) && !props.noWebp) {
       return srcSetToUse().replace(/\?/g, "?format=webp&");
     } else {
       return "";
     }
-  }
-  function aspectRatioCss() {
+  });
+  const aspectRatioCss = createMemo(() => {
     const aspectRatioStyles = {
       position: "absolute",
       height: "100%",
@@ -1774,7 +1813,7 @@ function Image(props) {
     };
     const out = props.aspectRatio ? aspectRatioStyles : void 0;
     return out;
-  }
+  });
   return [(() => {
     const _el$ = _tmpl$22(), _el$3 = _el$.firstChild;
     insert(_el$, createComponent(Show, {
@@ -1791,7 +1830,7 @@ function Image(props) {
       const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " " + css({
         opacity: "1",
         transition: "opacity 0.2s ease-in-out"
-      }), _v$2 = props.altText, _v$3 = props.altText ? "presentation" : void 0, _v$4 = {
+      }), _v$2 = props.altText, _v$3 = props.altText ? void 0 : "presentation", _v$4 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -2767,13 +2806,15 @@ function Embed(props) {
     }
   }
   let elem;
+  const onUpdateFn_0_elem = createMemo(() => elem);
+  const onUpdateFn_0_ranInitFn__ = createMemo(() => 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 (() => {
     const _el$ = _tmpl$9();
     const _ref$ = elem;
@@ -3667,7 +3708,7 @@ var _tmpl$15 = /* @__PURE__ */ template(`<source type=video/mp4>`);
 var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
-  function videoProps() {
+  const videoProps = createMemo(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -3685,12 +3726,12 @@ function Video(props) {
         playsInline: true
       } : {}
     };
-  }
-  function spreadProps() {
+  });
+  const spreadProps = createMemo(() => {
     return {
       ...videoProps()
     };
-  }
+  });
   return (() => {
     const _el$ = _tmpl$33(), _el$2 = _el$.firstChild;
     _el$.style.setProperty("position", "relative");
@@ -4405,7 +4446,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.14.5";
+var SDK_VERSION = "1.0.12";
 
 // src/functions/register.ts
 var registry = {};
@@ -4684,7 +4725,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
       });
     }
   }
@@ -4707,13 +4752,14 @@ function EnableEditor(props) {
     }
   }
   function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => String(evaluate({
       code: group,
       context: props.context || {},
       localState: void 0,
       rootState: props.builderContextSignal.rootState,
-      rootSetState: props.builderContextSignal.rootSetState
-    }));
+      rootSetState: props.builderContextSignal.rootSetState,
+      enableCache: true
+    })));
   }
   function handleRequest({
     url,
@@ -4818,33 +4864,40 @@ function EnableEditor(props) {
     runHttpRequests();
     emitStateUpdate();
   });
+  const onUpdateFn_0_props_content = createMemo(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
-  createEffect(on(() => [props.content], onUpdateFn_0));
+  createEffect(on(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
+  const onUpdateFn_1_shouldSendResetCookie__ = createMemo(() => shouldSendResetCookie());
   function onUpdateFn_1() {
   }
-  createEffect(on(() => [shouldSendResetCookie()], onUpdateFn_1));
+  createEffect(on(() => [onUpdateFn_1_shouldSendResetCookie__()], onUpdateFn_1));
+  const onUpdateFn_2_props_builderContextSignal_content__data__jsCode = createMemo(() => props.builderContextSignal.content?.data?.jsCode);
   function onUpdateFn_2() {
     evaluateJsCode();
   }
-  createEffect(on(() => [props.builderContextSignal.content?.data?.jsCode], onUpdateFn_2));
+  createEffect(on(() => [onUpdateFn_2_props_builderContextSignal_content__data__jsCode()], onUpdateFn_2));
+  const onUpdateFn_3_props_builderContextSignal_content__data__httpRequests = createMemo(() => props.builderContextSignal.content?.data?.httpRequests);
   function onUpdateFn_3() {
     runHttpRequests();
   }
-  createEffect(on(() => [props.builderContextSignal.content?.data?.httpRequests], onUpdateFn_3));
+  createEffect(on(() => [onUpdateFn_3_props_builderContextSignal_content__data__httpRequests()], onUpdateFn_3));
+  const onUpdateFn_4_props_builderContextSignal_rootState = createMemo(() => props.builderContextSignal.rootState);
   function onUpdateFn_4() {
     emitStateUpdate();
   }
-  createEffect(on(() => [props.builderContextSignal.rootState], onUpdateFn_4));
+  createEffect(on(() => [onUpdateFn_4_props_builderContextSignal_rootState()], onUpdateFn_4));
+  const onUpdateFn_5_props_data = createMemo(() => props.data);
   function onUpdateFn_5() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
-  createEffect(on(() => [props.data], onUpdateFn_5));
+  createEffect(on(() => [onUpdateFn_5_props_data()], onUpdateFn_5));
+  const onUpdateFn_6_props_locale = createMemo(() => props.locale);
   function onUpdateFn_6() {
     if (props.locale) {
       mergeNewRootState({
@@ -4852,7 +4905,7 @@ function EnableEditor(props) {
       });
     }
   }
-  createEffect(on(() => [props.locale], onUpdateFn_6));
+  createEffect(on(() => [onUpdateFn_6_props_locale()], onUpdateFn_6));
   return createComponent(builder_context_default.Provider, {
     get value() {
       return props.builderContextSignal;
@@ -5184,16 +5237,16 @@ function ContentVariants(props) {
     canTrack: getDefaultCanTrack(props.canTrack),
     content: props.content
   }));
-  function updateCookieAndStylesScriptStr() {
+  const updateCookieAndStylesScriptStr = createMemo(() => {
     return getUpdateCookieAndStylesScript(getVariants(props.content).map((value) => ({
       id: value.testVariationId,
       testRatio: value.testRatio
     })), props.content?.id || "");
-  }
-  function hideVariantsStyleString() {
+  });
+  const hideVariantsStyleString = createMemo(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
-  }
-  function defaultContent() {
+  });
+  const defaultContent = createMemo(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -5201,7 +5254,7 @@ function ContentVariants(props) {
       item: props.content,
       canTrack: getDefaultCanTrack(props.canTrack)
     });
-  }
+  });
   onMount(() => {
     setShouldRenderVariants(false);
   });
@@ -5381,9 +5434,9 @@ var fetchSymbolContent = async ({
 var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
-  function className() {
+  const className = createMemo(() => {
     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;
@@ -5397,12 +5450,12 @@ function Symbol(props) {
     });
   }
   onMount(() => {
-    setContent();
   });
+  const onUpdateFn_0_props_symbol = createMemo(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect(on(() => [props.symbol], onUpdateFn_0));
+  createEffect(on(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return (() => {
     const _el$ = _tmpl$17();
     spread(_el$, mergeProps({