@builder.io/sdk-qwik 0.14.6 → 0.14.8

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.8";
 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) => {
@@ -4919,17 +4958,7 @@ const getCss = ({ cssCode, contentId }) => {
     return cssCode;
   return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
 };
-const ContentStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  const state = qwik.useStore({
-    injectedStyles: `
-${getCss({
-      cssCode: props.cssCode,
-      contentId: props.contentId
-    })}
-${getFontCss({
-      customFonts: props.customFonts
-    })}
-
+const DEFAULT_STYLES = `
 .builder-button {
   all: unset;
 }
@@ -4946,6 +4975,21 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
+`;
+const getDefaultStyles = (isNested) => {
+  return !isNested ? DEFAULT_STYLES : "";
+};
+const ContentStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
+  const state = qwik.useStore({
+    injectedStyles: `
+${getCss({
+      cssCode: props.cssCode,
+      contentId: props.contentId
+    })}
+${getFontCss({
+      customFonts: props.customFonts
+    })}
+${getDefaultStyles(props.isNestedRender)}
 `.trim()
   });
   return /* @__PURE__ */ qwik._jsxC(InlinedStyles, {
@@ -5093,6 +5137,9 @@ const ContentComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
         }
       }, 3, "LQ_0") : null,
       /* @__PURE__ */ qwik._jsxC(ContentStyles, {
+        get isNestedRender() {
+          return props.isNestedRender;
+        },
         get contentId() {
           var _a2;
           return (_a2 = state.builderContextSignal.content) == null ? void 0 : _a2.id;
@@ -5123,7 +5170,10 @@ const ContentComponent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.
             return (_b2 = (_a2 = p0.builderContextSignal.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.customFonts;
           }, [
             state
-          ], "p0.builderContextSignal.content?.data?.customFonts")
+          ], "p0.builderContextSignal.content?.data?.customFonts"),
+          isNestedRender: qwik._fnSignal((p0) => p0.isNestedRender, [
+            props
+          ], "p0.isNestedRender")
         }
       }, 3, "LQ_1"),
       /* @__PURE__ */ qwik._jsxC(Blocks, {
@@ -5245,7 +5295,7 @@ const ContentVariants = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.i
   ]));
   return /* @__PURE__ */ qwik._jsxC(qwik.Fragment, {
     children: [
-      !props.__isNestedRender && TARGET !== "reactNative" ? /* @__PURE__ */ qwik._jsxC(InlinedScript, {
+      !props.isNestedRender && TARGET !== "reactNative" ? /* @__PURE__ */ qwik._jsxC(InlinedScript, {
         get scriptStr() {
           return getScriptString();
         },
@@ -5287,6 +5337,9 @@ const ContentVariants = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.i
           }, 3, "XM_2"),
           (getVariants(props.content) || []).map((variant) => {
             return /* @__PURE__ */ qwik._jsxC(ContentComponent, {
+              get isNestedRender() {
+                return props.isNestedRender;
+              },
               content: variant,
               showContent: false,
               get model() {
@@ -5371,6 +5424,9 @@ const ContentVariants = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.i
                 enrich: qwik._fnSignal((p0) => p0.enrich, [
                   props
                 ], "p0.enrich"),
+                isNestedRender: qwik._fnSignal((p0) => p0.isNestedRender, [
+                  props
+                ], "p0.isNestedRender"),
                 isSsrAbTest: qwik._fnSignal((p0) => p0.shouldRenderVariants, [
                   state
                 ], "p0.shouldRenderVariants"),
@@ -5393,6 +5449,9 @@ const ContentVariants = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.i
         ]
       }, 1, "XM_3") : null,
       /* @__PURE__ */ qwik._jsxC(ContentComponent, {
+        get isNestedRender() {
+          return props.isNestedRender;
+        },
         get content() {
           return defaultContent.value;
         },
@@ -5482,6 +5541,9 @@ const ContentVariants = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.i
           enrich: qwik._fnSignal((p0) => p0.enrich, [
             props
           ], "p0.enrich"),
+          isNestedRender: qwik._fnSignal((p0) => p0.isNestedRender, [
+            props
+          ], "p0.isNestedRender"),
           isSsrAbTest: qwik._fnSignal((p0) => p0.shouldRenderVariants, [
             state
           ], "p0.shouldRenderVariants"),
@@ -5560,6 +5622,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
   return /* @__PURE__ */ qwik._jsxS("div", {
     ...props.attributes,
     children: /* @__PURE__ */ qwik._jsxC(ContentVariants, {
+      isNestedRender: true,
       get apiVersion() {
         return props.builderContext.apiVersion;
       },
@@ -5631,6 +5694,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
           props,
           state
         ], "{...p0.symbol?.data,...p0.builderContext.localState,...p1.contentToUse?.data?.state}"),
+        isNestedRender: qwik._IMMUTABLE,
         linkComponent: qwik._fnSignal((p0) => p0.builderLinkComponent, [
           props
         ], "p0.builderLinkComponent"),