@builder.io/sdk-qwik 0.14.6 → 0.14.7

package/lib/browser/index.qwik.cjs

@@ -211,7 +211,7 @@ function flattenState({ rootState, localState, rootSetState }) {
       if (localState && prop in localState)
         return localState[prop];
       const val = target[prop];
-      if (typeof val === "object")
+      if (typeof val === "object" && val !== null)
         return flattenState({
           rootState: val,
           localState: void 0,
@@ -253,10 +253,34 @@ const shouldForceBrowserRuntimeInNode = () => {
   return false;
 };
 const chooseBrowserOrServerEval = (args) => build.isBrowser || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : runInBrowser(args);
-function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
+const _EvalCache = class _EvalCache2 {
+  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 = _EvalCache2.cache.get(key);
+    return cachedVal;
+  }
+  static setCachedValue(key, value) {
+    if (_EvalCache2.cache.size > 20)
+      _EvalCache2.cache.delete(_EvalCache2.cache.keys().next().value);
+    _EvalCache2.cache.set(key, {
+      value
+    });
+  }
+};
+_EvalCache.cacheLimit = 20;
+_EvalCache.cache = /* @__PURE__ */ new Map();
+let EvalCache = _EvalCache;
+function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
   if (code === "") {
     logger.warn("Skipping evaluation of empty code block.");
-    return;
+    return void 0;
   }
   const args = {
     code: parseCode(code, {
@@ -269,8 +293,19 @@ function evaluate({ code, context, localState, rootState, rootSetState, event, i
     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
@@ -309,7 +344,8 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
       localState,
       rootState,
       rootSetState,
-      context
+      context,
+      enableCache: true
     });
     set(copied, binding, value);
   }
@@ -523,6 +559,51 @@ function bindScrollInViewAnimation(animation) {
     immediateOnScroll();
   });
 }
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+const 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);
+};
+const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
+const createCssClass = ({ mediaQuery, className, styles }) => {
+  const cssClass = `.${className} {
+    ${convertStyleMapToCSS(styles)}
+  }`;
+  if (mediaQuery)
+    return `${mediaQuery} {
+      ${cssClass}
+    }`;
+  else
+    return cssClass;
+};
+function transformStyleProperty({ style }) {
+  return style;
+}
+const 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;
+  }
+}
 const getComponent = ({ block, context, registeredComponents }) => {
   var _a;
   const componentName = (_a = getProcessedBlock({
@@ -553,7 +634,8 @@ const getRepeatItemData = ({ block, context }) => {
     localState: context.localState,
     rootState: context.rootState,
     rootSetState: context.rootSetState,
-    context: context.context
+    context: context.context,
+    enableCache: true
   });
   if (!Array.isArray(itemsArray))
     return void 0;
@@ -617,28 +699,6 @@ const getSizesForBreakpoints = ({ small, medium }) => {
   };
   return newSizes;
 };
-const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-const 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);
-};
-const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
-const createCssClass = ({ mediaQuery, className, styles }) => {
-  const cssClass = `.${className} {
-    ${convertStyleMapToCSS(styles)}
-  }`;
-  if (mediaQuery)
-    return `${mediaQuery} {
-      ${cssClass}
-    }`;
-  else
-    return cssClass;
-};
 const InlinedStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ qwik._jsxQ("style", null, {
     dangerouslySetInnerHTML: qwik._fnSignal((p0) => p0.styles, [
@@ -737,7 +797,8 @@ function createEventHandler(value, options) {
       localState: options2.localState,
       rootState: options2.rootState,
       rootSetState: options2.rootSetState,
-      event
+      event,
+      enableCache: true
     });
   }, "createEventHandler_7wCAiJVliNE", [
     options,
@@ -765,29 +826,6 @@ function getBlockActions(options) {
   }
   return obj;
 }
-function transformStyleProperty({ style }) {
-  return style;
-}
-const 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;
-  }
-}
 function transformBlockProperties({ properties }) {
   return properties;
 }
@@ -967,9 +1005,6 @@ const RepeatedBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
 const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   var _a;
   qwik._jsxBranch();
-  const state = qwik.useStore({
-    childrenContext: props.context
-  });
   const blockComponent = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [props2] = qwik.useLexicalScope();
     return getComponent({
@@ -1042,7 +1077,7 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   ]));
   const componentRefProps = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    const [blockComponent2, processedBlock2, props2, state2] = qwik.useLexicalScope();
+    const [blockComponent2, processedBlock2, props2] = qwik.useLexicalScope();
     return {
       blockChildren: processedBlock2.value.children ?? [],
       componentRef: (_a2 = blockComponent2.value) == null ? void 0 : _a2.component,
@@ -1056,7 +1091,7 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
           builderComponents: props2.registeredComponents
         } : {}
       },
-      context: state2.childrenContext,
+      context: props2.context,
       linkComponent: props2.linkComponent,
       registeredComponents: props2.registeredComponents,
       builderBlock: processedBlock2.value,
@@ -1066,8 +1101,7 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   }, "Block_component_componentRefProps_useComputed_Ikbl8VO04ho", [
     blockComponent,
     processedBlock,
-    props,
-    state
+    props
   ]));
   qwik.useVisibleTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [processedBlock2] = qwik.useLexicalScope();
@@ -1175,19 +1209,19 @@ const Block = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
             (childrenWithoutParentComponent.value || []).map((child) => {
               return /* @__PURE__ */ qwik._jsxC(Block, {
                 block: child,
-                get context() {
-                  return state.childrenContext;
-                },
                 get registeredComponents() {
                   return props.registeredComponents;
                 },
                 get linkComponent() {
                   return props.linkComponent;
                 },
+                get context() {
+                  return props.context;
+                },
                 [qwik._IMMUTABLE]: {
-                  context: qwik._fnSignal((p0) => p0.childrenContext, [
-                    state
-                  ], "p0.childrenContext"),
+                  context: qwik._fnSignal((p0) => p0.context, [
+                    props
+                  ], "p0.context"),
                   linkComponent: qwik._fnSignal((p0) => p0.linkComponent, [
                     props
                   ], "p0.linkComponent"),
@@ -4360,7 +4394,7 @@ function isFromTrustedHost(trustedHosts, e) {
   const url = new URL(e.origin), hostname = url.hostname;
   return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
 }
-const SDK_VERSION = "0.14.6";
+const SDK_VERSION = "0.14.7";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -4609,7 +4643,11 @@ const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
       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
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
@@ -4631,13 +4669,14 @@ const onClick = function onClick22(props, state, elementRef, event) {
     state.clicked = true;
 };
 const evalExpression = function evalExpression2(props, state, elementRef, 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
+  })));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
   fetch$1(url).then((response) => response.json()).then((json) => {

package/lib/browser/index.qwik.mjs

@@ -209,7 +209,7 @@ function flattenState({ rootState, localState, rootSetState }) {
       if (localState && prop in localState)
         return localState[prop];
       const val = target[prop];
-      if (typeof val === "object")
+      if (typeof val === "object" && val !== null)
         return flattenState({
           rootState: val,
           localState: void 0,
@@ -251,10 +251,34 @@ const shouldForceBrowserRuntimeInNode = () => {
   return false;
 };
 const chooseBrowserOrServerEval = (args) => isBrowser$1 || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : runInBrowser(args);
-function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
+const _EvalCache = class _EvalCache2 {
+  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 = _EvalCache2.cache.get(key);
+    return cachedVal;
+  }
+  static setCachedValue(key, value) {
+    if (_EvalCache2.cache.size > 20)
+      _EvalCache2.cache.delete(_EvalCache2.cache.keys().next().value);
+    _EvalCache2.cache.set(key, {
+      value
+    });
+  }
+};
+_EvalCache.cacheLimit = 20;
+_EvalCache.cache = /* @__PURE__ */ new Map();
+let EvalCache = _EvalCache;
+function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
   if (code === "") {
     logger.warn("Skipping evaluation of empty code block.");
-    return;
+    return void 0;
   }
   const args = {
     code: parseCode(code, {
@@ -267,8 +291,19 @@ function evaluate({ code, context, localState, rootState, rootSetState, event, i
     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
@@ -307,7 +342,8 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
       localState,
       rootState,
       rootSetState,
-      context
+      context,
+      enableCache: true
     });
     set(copied, binding, value);
   }
@@ -521,6 +557,51 @@ function bindScrollInViewAnimation(animation) {
     immediateOnScroll();
   });
 }
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+const 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);
+};
+const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
+const createCssClass = ({ mediaQuery, className, styles }) => {
+  const cssClass = `.${className} {
+    ${convertStyleMapToCSS(styles)}
+  }`;
+  if (mediaQuery)
+    return `${mediaQuery} {
+      ${cssClass}
+    }`;
+  else
+    return cssClass;
+};
+function transformStyleProperty({ style }) {
+  return style;
+}
+const 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;
+  }
+}
 const getComponent = ({ block, context, registeredComponents }) => {
   var _a;
   const componentName = (_a = getProcessedBlock({
@@ -551,7 +632,8 @@ const getRepeatItemData = ({ block, context }) => {
     localState: context.localState,
     rootState: context.rootState,
     rootSetState: context.rootSetState,
-    context: context.context
+    context: context.context,
+    enableCache: true
   });
   if (!Array.isArray(itemsArray))
     return void 0;
@@ -615,28 +697,6 @@ const getSizesForBreakpoints = ({ small, medium }) => {
   };
   return newSizes;
 };
-const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-const 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);
-};
-const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
-const createCssClass = ({ mediaQuery, className, styles }) => {
-  const cssClass = `.${className} {
-    ${convertStyleMapToCSS(styles)}
-  }`;
-  if (mediaQuery)
-    return `${mediaQuery} {
-      ${cssClass}
-    }`;
-  else
-    return cssClass;
-};
 const InlinedStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   return /* @__PURE__ */ _jsxQ("style", null, {
     dangerouslySetInnerHTML: _fnSignal((p0) => p0.styles, [
@@ -735,7 +795,8 @@ function createEventHandler(value, options) {
       localState: options2.localState,
       rootState: options2.rootState,
       rootSetState: options2.rootSetState,
-      event
+      event,
+      enableCache: true
     });
   }, "createEventHandler_7wCAiJVliNE", [
     options,
@@ -763,29 +824,6 @@ function getBlockActions(options) {
   }
   return obj;
 }
-function transformStyleProperty({ style }) {
-  return style;
-}
-const 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;
-  }
-}
 function transformBlockProperties({ properties }) {
   return properties;
 }
@@ -965,9 +1003,6 @@ const RepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
 const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   var _a;
   _jsxBranch();
-  const state = useStore({
-    childrenContext: props.context
-  });
   const blockComponent = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
     return getComponent({
@@ -1040,7 +1075,7 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   ]));
   const componentRefProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    const [blockComponent2, processedBlock2, props2, state2] = useLexicalScope();
+    const [blockComponent2, processedBlock2, props2] = useLexicalScope();
     return {
       blockChildren: processedBlock2.value.children ?? [],
       componentRef: (_a2 = blockComponent2.value) == null ? void 0 : _a2.component,
@@ -1054,7 +1089,7 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
           builderComponents: props2.registeredComponents
         } : {}
       },
-      context: state2.childrenContext,
+      context: props2.context,
       linkComponent: props2.linkComponent,
       registeredComponents: props2.registeredComponents,
       builderBlock: processedBlock2.value,
@@ -1064,8 +1099,7 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   }, "Block_component_componentRefProps_useComputed_Ikbl8VO04ho", [
     blockComponent,
     processedBlock,
-    props,
-    state
+    props
   ]));
   useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [processedBlock2] = useLexicalScope();
@@ -1173,19 +1207,19 @@ const Block = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
             (childrenWithoutParentComponent.value || []).map((child) => {
               return /* @__PURE__ */ _jsxC(Block, {
                 block: child,
-                get context() {
-                  return state.childrenContext;
-                },
                 get registeredComponents() {
                   return props.registeredComponents;
                 },
                 get linkComponent() {
                   return props.linkComponent;
                 },
+                get context() {
+                  return props.context;
+                },
                 [_IMMUTABLE]: {
-                  context: _fnSignal((p0) => p0.childrenContext, [
-                    state
-                  ], "p0.childrenContext"),
+                  context: _fnSignal((p0) => p0.context, [
+                    props
+                  ], "p0.context"),
                   linkComponent: _fnSignal((p0) => p0.linkComponent, [
                     props
                   ], "p0.linkComponent"),
@@ -4358,7 +4392,7 @@ function isFromTrustedHost(trustedHosts, e) {
   const url = new URL(e.origin), hostname = url.hostname;
   return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
 }
-const SDK_VERSION = "0.14.6";
+const SDK_VERSION = "0.14.7";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -4607,7 +4641,11 @@ const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
       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
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
@@ -4629,13 +4667,14 @@ const onClick = function onClick22(props, state, elementRef, event) {
     state.clicked = true;
 };
 const evalExpression = function evalExpression2(props, state, elementRef, 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
+  })));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
   fetch$1(url).then((response) => response.json()).then((json) => {