@builder.io/sdk-qwik 0.0.25 → 0.0.27

package/lib/index.qwik.cjs

@@ -69,53 +69,55 @@ const setupBrowserForEditing = () => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
-        supportsPatchUpdates: false
+        supportsPatchUpdates: false,
+        supportsAddBlockScoping: true
       }
     }, "*");
     window.addEventListener("message", ({ data }) => {
-      if (data)
-        switch (data.type) {
-          case "builder.evaluate": {
-            const text = data.data.text;
-            const args = data.data.arguments || [];
-            const id = data.data.id;
-            const fn = new Function(text);
-            let result;
-            let error = null;
-            try {
-              result = fn.apply(null, args);
-            } catch (err) {
-              error = err;
-            }
-            if (error)
-              window.parent?.postMessage({
-                type: "builder.evaluateError",
-                data: {
-                  id,
-                  error: error.message
-                }
-              }, "*");
-            else if (result && typeof result.then === "function")
-              result.then((finalResult) => {
-                window.parent?.postMessage({
-                  type: "builder.evaluateResult",
-                  data: {
-                    id,
-                    result: finalResult
-                  }
-                }, "*");
-              }).catch(console.error);
-            else
+      if (!data?.type)
+        return;
+      switch (data.type) {
+        case "builder.evaluate": {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          const fn = new Function(text);
+          let result;
+          let error = null;
+          try {
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err;
+          }
+          if (error)
+            window.parent?.postMessage({
+              type: "builder.evaluateError",
+              data: {
+                id,
+                error: error.message
+              }
+            }, "*");
+          else if (result && typeof result.then === "function")
+            result.then((finalResult) => {
               window.parent?.postMessage({
                 type: "builder.evaluateResult",
                 data: {
-                  result,
-                  id
+                  id,
+                  result: finalResult
                 }
               }, "*");
-            break;
-          }
+            }).catch(console.error);
+          else
+            window.parent?.postMessage({
+              type: "builder.evaluateResult",
+              data: {
+                result,
+                id
+              }
+            }, "*");
+          break;
         }
+      }
     });
   }
 };
@@ -162,6 +164,7 @@ function evaluate({ code, context, state, event }) {
     console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
   }
 }
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 const set = (obj, _path, value) => {
   if (Object(obj) !== obj)
     return obj;
@@ -175,13 +178,14 @@ function transformBlock(block) {
 const evaluateBindings = ({ block, context, state }) => {
   if (!block.bindings)
     return block;
+  const copy = fastClone(block);
   const copied = {
-    ...block,
+    ...copy,
     properties: {
-      ...block.properties
+      ...copy.properties
     },
     actions: {
-      ...block.actions
+      ...copy.actions
     }
   };
   for (const binding in block.bindings) {
@@ -214,13 +218,22 @@ const convertStyleMaptoCSS = (style) => {
   });
   return cssProps.join("\n");
 };
+const createCssClass = ({ mediaQuery, className: className3, styles }) => {
+  const cssClass = `.${className3} {
+    ${convertStyleMaptoCSS(styles)}
+  }`;
+  if (mediaQuery)
+    return `${mediaQuery} {
+      ${cssClass}
+    }`;
+  else
+    return cssClass;
+};
 const tagName$1 = function tagName(props, state) {
   return "style";
 };
 const RenderInlinedStyles = (props) => {
-  const state = {
-    tagName: ""
-  };
+  const state = {};
   state.tagName = tagName$1();
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /* @__PURE__ */ jsxRuntime.jsx(state.tagName, {
@@ -242,19 +255,30 @@ const css = function css2(props, state) {
   const largeStyles = styles?.large;
   const mediumStyles = styles?.medium;
   const smallStyles = styles?.small;
-  return `
-        ${largeStyles ? `.${useBlock$1(props).id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
-        ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
-              .${useBlock$1(props).id} {${convertStyleMaptoCSS(mediumStyles)}}
-            }` : ""}
-        ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
-              .${useBlock$1(props).id} {${convertStyleMaptoCSS(smallStyles)}}
-            }` : ""}
-      }`;
+  const className3 = useBlock$1(props).id;
+  const largeStylesClass = largeStyles ? createCssClass({
+    className: className3,
+    styles: largeStyles
+  }) : "";
+  const mediumStylesClass = mediumStyles ? createCssClass({
+    className: className3,
+    styles: mediumStyles,
+    mediaQuery: getMaxWidthQueryForSize("medium")
+  }) : "";
+  const smallStylesClass = smallStyles ? createCssClass({
+    className: className3,
+    styles: smallStyles,
+    mediaQuery: getMaxWidthQueryForSize("small")
+  }) : "";
+  return [
+    largeStylesClass,
+    mediumStylesClass,
+    smallStylesClass
+  ].join(" ");
 };
 const BlockStyles = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" || TARGET === "qwik" ? /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles$1, {
+    children: TARGET !== "reactNative" && css(props) ? /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles$1, {
       styles: css(props)
     }) : null
   });
@@ -308,37 +332,6 @@ function getBlockProperties(block) {
     ].filter(Boolean).join(" ")
   };
 }
-const convertStyleObject = (obj) => {
-  return obj;
-};
-const sanitizeBlockStyles = (styles) => styles;
-const getStyleForTarget = (styles) => {
-  switch (TARGET) {
-    case "reactNative":
-      return {
-        ...styles.large ? convertStyleObject(styles.large) : {},
-        ...styles.medium ? convertStyleObject(styles.medium) : {},
-        ...styles.small ? convertStyleObject(styles.small) : {}
-      };
-    default:
-      return {
-        ...styles.large ? convertStyleObject(styles.large) : {},
-        ...styles.medium ? {
-          [getMaxWidthQueryForSize("medium")]: convertStyleObject(styles.medium)
-        } : {},
-        ...styles.small ? {
-          [getMaxWidthQueryForSize("small")]: convertStyleObject(styles.small)
-        } : {}
-      };
-  }
-};
-function getBlockStyles(block) {
-  if (!block.responsiveStyles)
-    return {};
-  const styles = getStyleForTarget(block.responsiveStyles);
-  const newStyles = sanitizeBlockStyles(styles);
-  return newStyles;
-}
 function getBlockTag(block) {
   return block.tagName || "div";
 }
@@ -393,6 +386,35 @@ const RenderComponent = (props) => {
   });
 };
 const RenderComponent$1 = RenderComponent;
+const RenderComponentWithContext = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
+  qwik.useContextProvider(BuilderContext, qwik.useStore({
+    content: (() => {
+      return props.context.content;
+    })(),
+    state: (() => {
+      return props.context.state;
+    })(),
+    context: (() => {
+      return props.context.context;
+    })(),
+    apiKey: (() => {
+      return props.context.apiKey;
+    })(),
+    registeredComponents: (() => {
+      return props.context.registeredComponents;
+    })(),
+    inheritedStyles: (() => {
+      return props.context.inheritedStyles;
+    })()
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
+    componentRef: props.componentRef,
+    componentOptions: props.componentOptions,
+    blockChildren: props.blockChildren,
+    context: props.context
+  });
+}, "RenderComponentWithContext_component_nXOUbUnjTAo"));
+const RenderComponentWithContext$1 = RenderComponentWithContext;
 const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useContextProvider(BuilderContext, qwik.useStore({
     content: (() => {
@@ -409,6 +431,9 @@ const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((p
     })(),
     registeredComponents: (() => {
       return props.repeatContext.registeredComponents;
+    })(),
+    inheritedStyles: (() => {
+      return props.repeatContext.inheritedStyles;
     })()
   }));
   return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
@@ -435,16 +460,6 @@ const component = function component2(props, state) {
   } else
     return ref;
 };
-const componentInfo$b = function componentInfo(props, state) {
-  if (component(props)) {
-    const { component: _, ...info } = component(props);
-    return info;
-  } else
-    return void 0;
-};
-const componentRef = function componentRef2(props, state) {
-  return component(props)?.component;
-};
 const tagName2 = function tagName3(props, state) {
   return getBlockTag(useBlock2(props));
 };
@@ -464,33 +479,30 @@ const attributes = function attributes2(props, state) {
       state: props.context.state,
       context: props.context.context
     }),
-    style: getBlockStyles(useBlock2(props))
+    ...{}
   };
 };
 const shouldWrap = function shouldWrap2(props, state) {
-  return !componentInfo$b(props)?.noWrap;
-};
-const componentOptions = function componentOptions2(props, state) {
-  return {
-    ...getBlockComponentOptions(useBlock2(props)),
-    ...shouldWrap(props) ? {} : {
-      attributes: attributes(props)
-    }
-  };
+  return !component(props)?.noWrap;
 };
 const renderComponentProps = function renderComponentProps2(props, state) {
   return {
     blockChildren: children(props),
-    componentRef: componentRef(props),
-    componentOptions: componentOptions(props),
-    context: props.context
+    componentRef: component(props)?.component,
+    componentOptions: {
+      ...getBlockComponentOptions(useBlock2(props)),
+      ...shouldWrap(props) ? {} : {
+        attributes: attributes(props)
+      }
+    },
+    context: childrenContext(props)
   };
 };
 const children = function children2(props, state) {
   return useBlock2(props).children ?? [];
 };
 const childrenWithoutParentComponent = function childrenWithoutParentComponent2(props, state) {
-  const shouldRenderChildrenOutsideRef = !componentRef(props) && !repeatItemData(props);
+  const shouldRenderChildrenOutsideRef = !component(props)?.component && !repeatItemData(props);
   return shouldRenderChildrenOutsideRef ? children(props) : [];
 };
 const repeatItemData = function repeatItemData2(props, state) {
@@ -521,27 +533,36 @@ const repeatItemData = function repeatItemData2(props, state) {
   }));
   return repeatArray;
 };
-const RenderBlock = (props) => {
-  const state = {
-    tagName: ""
+const inheritedTextStyles = function inheritedTextStyles2(props, state) {
+  return {};
+};
+const childrenContext = function childrenContext2(props, state) {
+  return {
+    apiKey: props.context.apiKey,
+    state: props.context.state,
+    content: props.context.content,
+    context: props.context.context,
+    registeredComponents: props.context.registeredComponents,
+    inheritedStyles: inheritedTextStyles()
   };
+};
+const renderComponentTag = function renderComponentTag2(props, state) {
+  if (TARGET === "reactNative")
+    return RenderComponentWithContext$1;
+  else
+    return RenderComponent$1;
+};
+const RenderBlock = (props) => {
+  const state = {};
   state.tagName = tagName2(props);
+  state.renderComponentTag = renderComponentTag();
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: shouldWrap(props) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [
         isEmptyHtmlElement(tagName2(props)) ? /* @__PURE__ */ jsxRuntime.jsx(state.tagName, {
           ...attributes(props)
         }) : null,
-        !isEmptyHtmlElement(tagName2(props)) && TARGET === "vue2" && repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: "vue2-root-element-workaround",
-          children: (repeatItemData(props) || []).map(function(data, index) {
-            return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
-              repeatContext: data.context,
-              block: data.block
-            }, index);
-          })
-        }) : null,
-        !isEmptyHtmlElement(tagName2(props)) && TARGET !== "vue2" && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
+        !isEmptyHtmlElement(tagName2(props)) && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
           return /* @__PURE__ */ jsxRuntime.jsx(RenderRepeatedBlock$1, {
             repeatContext: data.context,
             block: data.block
@@ -550,27 +571,26 @@ const RenderBlock = (props) => {
         !isEmptyHtmlElement(tagName2(props)) && !repeatItemData(props) ? /* @__PURE__ */ jsxRuntime.jsxs(state.tagName, {
           ...attributes(props),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
+            /* @__PURE__ */ jsxRuntime.jsx(state.renderComponentTag, {
               ...renderComponentProps(props)
             }),
             (childrenWithoutParentComponent(props) || []).map(function(child) {
               return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock, {
                 block: child,
-                context: props.context
+                context: childrenContext(props)
               }, "render-block-" + child.id);
             }),
             (childrenWithoutParentComponent(props) || []).map(function(child) {
               return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles$1, {
                 block: child,
-                context: props.context
+                context: childrenContext(props)
               }, "block-style-" + child.id);
             })
           ]
         }) : null
       ]
-    }) : /* @__PURE__ */ jsxRuntime.jsx(RenderComponent$1, {
-      ...renderComponentProps(props),
-      context: props.context
+    }) : /* @__PURE__ */ jsxRuntime.jsx(state.renderComponentTag, {
+      ...renderComponentProps(props)
     })
   });
 };
@@ -601,14 +621,12 @@ const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
 const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$3, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
   const builderContext = qwik.useContext(BuilderContext);
-  const state = {
-    tagName: ""
-  };
+  const state = {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: className(props) + " div-RenderBlocks",
     "builder-path": props.path,
     "builder-parent-id": props.parent,
-    style: props.style,
+    style: props.styleProp,
     onClick$: qwik.inlinedQrl((event) => {
       const [builderContext2, props2, state2] = qwik.useLexicalScope();
       return onClick$1(props2);
@@ -685,9 +703,7 @@ const columnCssVars = function columnCssVars2(props, state) {
 };
 const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
-  const state = {
-    tagName: ""
-  };
+  const state = {};
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     class: "builder-columns div-Columns",
     style: columnsCssVars(props, state),
@@ -703,7 +719,7 @@ const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
           blocks: markMutable(column.blocks),
           path: `component.options.columns.${index}.blocks`,
           parent: props.builderBlock.id,
-          style: {
+          styleProp: {
             flexGrow: "1"
           }
         })
@@ -801,8 +817,7 @@ const webpSrcSet = function webpSrcSet2(props, state) {
 };
 const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "div-Image",
+  return /* @__PURE__ */ jsxRuntime.jsxs(qwik.Fragment, {
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("picture", {
         children: [
@@ -828,33 +843,32 @@ const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
           })
         ]
       }),
-      props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: "builder-image-sizer div-Image-2",
+      props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent) ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "builder-image-sizer div-Image",
         style: {
           paddingTop: props.aspectRatio * 100 + "%"
         }
       }) : null,
       props.builderBlock?.children?.length && props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}) : null,
-      !props.fitContent ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: "div-Image-3",
+      !props.fitContent && props.children ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "div-Image-2",
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       }) : null
     ]
   });
 }, "Image_component_LRxDkFa1EfU"));
 const Image$1 = Image;
-const STYLES$1 = `.div-Image { 
-position: relative; }.img-Image { 
+const STYLES$1 = `.img-Image { 
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0px;
-left: 0px; }.div-Image-2 { 
+left: 0px; }.div-Image { 
 width: 100%;
 pointer-events: none;
-font-size: 0; }.div-Image-3 { 
+font-size: 0; }.div-Image-2 { 
 display: flex;
 flex-direction: column;
 align-items: stretch;
@@ -889,9 +903,15 @@ const videoProps = function videoProps2(props, state) {
     } : {}
   };
 };
+const spreadProps = function spreadProps2(props, state) {
+  return {
+    ...props.attributes,
+    ...videoProps(props)
+  };
+};
 const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("video", {
-    ...videoProps(props),
+    ...spreadProps(props),
     style: {
       width: "100%",
       height: "100%",
@@ -1776,7 +1796,7 @@ const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =>
   });
 }, "CustomCode_component_uYOSy7w7Zqw"));
 const customCode = CustomCode;
-const componentInfo2 = {
+const componentInfo = {
   name: "Custom Code",
   static: true,
   builtIn: true,
@@ -1849,7 +1869,7 @@ const getDefaultRegisteredComponents = () => [
   },
   {
     component: customCode,
-    ...componentInfo2
+    ...componentInfo
   }
 ];
 function flatten(object, path = null, separator = ".") {
@@ -2126,7 +2146,6 @@ const createRegisterComponentMessage = ({ component: _, ...info }) => ({
   type: "builder.registerComponent",
   data: prepareComponentInfoToSend(info)
 });
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
 const serializeFn = (fnValue) => {
   const fnStr = fnValue.toString().trim();
@@ -2232,18 +2251,18 @@ const getTrackingEventData = async ({ canTrack }) => {
     visitorId
   };
 };
-const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
   type: eventType,
   data: {
     ...properties,
+    metadata: JSON.stringify(metadata),
     ...await getTrackingEventData({
       canTrack
     }),
-    ownerId: orgId,
-    contentId
+    ownerId: apiKey
   }
 });
-async function track(eventProps) {
+async function _track(eventProps) {
   if (!eventProps.canTrack)
     return;
   if (isEditing())
@@ -2265,6 +2284,10 @@ async function track(eventProps) {
     console.error("Failed to track: ", err);
   });
 }
+const track = (args) => _track({
+  ...args,
+  canTrack: true
+});
 const getCssFromFont = function getCssFromFont2(props, state, font) {
   const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
   const name = family.split(",")[0];
@@ -2308,9 +2331,7 @@ ${getFontCss(props, state, {
   })}`;
 };
 const RenderContentStyles = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
-  const state = {
-    tagName: ""
-  };
+  const state = {};
   return /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles$1, {
     styles: injectedStyles(props, state)
   });
@@ -2384,13 +2405,17 @@ const httpReqsData = function httpReqsData2(props, state, elementRef) {
   return {};
 };
 const onClick2 = function onClick3(props, state, elementRef, _event) {
-  if (useContent(props, state))
-    track({
+  if (useContent(props, state)) {
+    const variationId = useContent(props, state)?.testVariationId;
+    const contentId = useContent(props, state)?.id;
+    _track({
       type: "click",
       canTrack: canTrackToUse(props),
-      contentId: useContent(props, state)?.id,
-      orgId: props.apiKey
+      contentId,
+      apiKey: props.apiKey,
+      variationId: variationId !== contentId ? variationId : void 0
     });
+  }
 };
 const evalExpression = function evalExpression2(props, state, elementRef, expression) {
   return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
@@ -2466,6 +2491,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
     if (isBrowser()) {
       if (isEditing()) {
         state2.forceReRenderCount = state2.forceReRenderCount + 1;
+        elementRef2.current && qwik._useMutableProps(elementRef2.current, true);
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents(props2)).forEach((registeredComponent) => {
@@ -2475,13 +2501,17 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
         window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
       }
-      if (useContent(props2, state2))
-        track({
+      if (useContent(props2, state2)) {
+        const variationId = useContent(props2, state2)?.testVariationId;
+        const contentId = useContent(props2, state2)?.id;
+        _track({
           type: "impression",
           canTrack: canTrackToUse(props2),
-          contentId: useContent(props2, state2)?.id,
-          orgId: props2.apiKey
+          contentId,
+          apiKey: props2.apiKey,
+          variationId: variationId !== contentId ? variationId : void 0
         });
+      }
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
         if (props2.model && searchParams.get("builder.preview") === props2.model) {
@@ -2555,6 +2585,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
         state
       ]),
       "builder-content-id": useContent(props, state)?.id,
+      "builder-model": props.model,
       children: [
         shouldRenderContentStyles(props, state) ? /* @__PURE__ */ jsxRuntime.jsx(RenderContentStyles$1, {
           cssCode: useContent(props, state)?.data?.cssCode,
@@ -2568,25 +2599,21 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
   });
 }, "RenderContent_component_hEAI0ahViXM"));
 const RenderContent$1 = RenderContent;
+const contentToUse = function contentToUse2(props, state, builderContext) {
+  return props.symbol?.content || state.fetchedContent;
+};
 const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   const builderContext = qwik.useContext(BuilderContext);
   const state = qwik.useStore({
     className: "builder-symbol",
-    content: null
+    fetchedContent: null
   });
-  qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
-    const [props2, state2] = qwik.useLexicalScope();
-    state2.content = props2.symbol?.content;
-  }, "Symbol_component_useClientEffect_Kfc9q3nzeSQ", [
-    props,
-    state
-  ]));
   qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
     const [builderContext2, props2, state2] = qwik.useLexicalScope();
     props2 && track2(props2, "symbol");
-    state2 && track2(state2, "content");
+    state2 && track2(state2, "fetchedContent");
     const symbolToUse = props2.symbol;
-    if (symbolToUse && !symbolToUse.content && !state2.content && symbolToUse.model)
+    if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model)
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext2.apiKey,
@@ -2594,7 +2621,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
           id: symbolToUse.entry
         }
       }).then((response) => {
-        state2.content = response;
+        state2.fetchedContent = response;
       });
   }, "Symbol_component_useWatch_9HNT04zd0Dk", [
     builderContext,
@@ -2614,7 +2641,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
         ...props.symbol?.content?.data?.state
       }),
       model: props.symbol?.model,
-      content: markMutable(state.content)
+      content: markMutable(contentToUse(props, state))
     })
   });
 }, "Symbol_component_WVvggdkUPdk"));
@@ -2654,3 +2681,4 @@ exports.normalizeSearchParams = normalizeSearchParams;
 exports.register = register;
 exports.registerComponent = registerComponent;
 exports.setEditorSettings = setEditorSettings;
+exports.track = track;