@builder.io/sdk-solid 0.14.5 → 1.0.12

package/lib/edge/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';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -287,7 +287,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,
@@ -3496,6 +3496,30 @@ var shouldForceBrowserRuntimeInNode = () => {
 var chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : runInEdge(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,
@@ -3503,11 +3527,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, {
@@ -3520,8 +3545,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
@@ -3566,7 +3603,8 @@ var evaluateBindings = ({
       localState,
       rootState,
       rootSetState,
-      context
+      context,
+      enableCache: true
     });
     set(copied, binding, value);
   }
@@ -3800,6 +3838,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,
@@ -3843,7 +3945,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;
@@ -3914,38 +4017,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 (() => {
@@ -3966,7 +4037,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,
@@ -3982,8 +4053,8 @@ function BlockStyles(props) {
       return processedBlock.show;
     }
     return true;
-  }
-  function css5() {
+  });
+  const css5 = createMemo(() => {
     const processedBlock = getProcessedBlock({
       block: props.block,
       localState: props.context.localState,
@@ -4017,7 +4088,7 @@ function BlockStyles(props) {
       mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
     }) : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
-  }
+  });
   return createComponent(Show, {
     get when() {
       return memo(() => !!(TARGET !== "reactNative" && css5()))() && canShowBlock();
@@ -4047,7 +4118,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
@@ -4075,38 +4147,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
@@ -4308,21 +4348,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,
@@ -4331,15 +4370,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;
@@ -4348,12 +4387,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,
@@ -4367,14 +4406,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;
@@ -4516,14 +4555,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;
                         }
                       });
                     }
@@ -4539,9 +4578,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({
@@ -4681,7 +4720,7 @@ function Columns(props) {
   }) {
     return stackAt() === "never" ? desktopStyle : stackedStyle;
   }
-  function columnsCssVars() {
+  const columnsCssVars = createMemo(() => {
     return {
       "--flex-dir": flexDir(),
       "--flex-dir-tablet": getTabletStyle({
@@ -4689,7 +4728,7 @@ function Columns(props) {
         desktopStyle: "row"
       })
     };
-  }
+  });
   function columnCssVars(index) {
     const gutter = index === 0 ? 0 : gutterSize();
     const width = getColumnCssWidth(index);
@@ -4728,7 +4767,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 {
@@ -4754,7 +4793,7 @@ function Columns(props) {
           }
         },
       `;
-  }
+  });
   return (() => {
     const _el$ = _tmpl$2();
     spread(_el$, mergeProps({
@@ -4892,7 +4931,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
@@ -4909,15 +4948,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%",
@@ -4927,7 +4966,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, {
@@ -4944,7 +4983,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()
@@ -5920,13 +5959,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;
@@ -6820,7 +6861,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
@@ -6838,12 +6879,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");
@@ -7558,7 +7599,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 = {};
@@ -7837,7 +7878,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
       });
     }
   }
@@ -7860,13 +7905,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,
@@ -7971,33 +8017,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({
@@ -8005,7 +8058,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;
@@ -8337,16 +8390,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
@@ -8354,7 +8407,7 @@ function ContentVariants(props) {
       item: props.content,
       canTrack: getDefaultCanTrack(props.canTrack)
     });
-  }
+  });
   onMount(() => {
     setShouldRenderVariants(false);
   });
@@ -8534,9 +8587,9 @@ var fetchSymbolContent = async ({
 var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
 function Symbol2(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;
@@ -8550,12 +8603,12 @@ function Symbol2(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({