@builder.io/sdk-qwik 0.2.3 → 0.3.1

package/lib/index.qwik.cjs

@@ -88,7 +88,7 @@ const getSizesForBreakpoints = ({ small, medium }) => {
   };
   return newSizes;
 };
-function evaluate({ code, context, state, event, isExpression = true }) {
+function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
   if (code === "") {
     console.warn("Skipping evaluation of empty code block.");
     return;
@@ -101,11 +101,29 @@ function evaluate({ code, context, state, event, isExpression = true }) {
   const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
   } catch (e) {
     console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
   }
 }
+function flattenState(rootState, localState, rootSetState) {
+  if (rootState === localState)
+    throw new Error("rootState === localState");
+  return new Proxy(rootState, {
+    get: (_, prop) => {
+      if (localState && prop in localState)
+        return localState[prop];
+      return rootState[prop];
+    },
+    set: (_, prop, value) => {
+      if (localState && prop in localState)
+        throw new Error("Writing to local state is not allowed as it is read-only.");
+      rootState[prop] = value;
+      rootSetState?.(rootState);
+      return true;
+    }
+  });
+}
 const set = (obj, _path, value) => {
   if (Object(obj) !== obj)
     return obj;
@@ -116,7 +134,7 @@ const set = (obj, _path, value) => {
 function transformBlock(block) {
   return block;
 }
-const evaluateBindings = ({ block, context, state }) => {
+const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
   if (!block.bindings)
     return block;
   const copy = fastClone(block);
@@ -133,19 +151,23 @@ const evaluateBindings = ({ block, context, state }) => {
     const expression = block.bindings[binding];
     const value = evaluate({
       code: expression,
-      state,
+      localState,
+      rootState,
+      rootSetState,
       context
     });
     set(copied, binding, value);
   }
   return copied;
 };
-function getProcessedBlock({ block, context, shouldEvaluateBindings, state }) {
+function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
   const transformedBlock = transformBlock(block);
   if (shouldEvaluateBindings)
     return evaluateBindings({
       block: transformedBlock,
-      state,
+      localState,
+      rootState,
+      rootSetState,
       context
     });
   else
@@ -199,7 +221,9 @@ const BlockStyles = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     const [props2] = qwik.useLexicalScope();
     return getProcessedBlock({
       block: props2.block,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       context: props2.context.context,
       shouldEvaluateBindings: true
     });
@@ -273,7 +297,9 @@ function createEventHandler(value, options) {
     return evaluate({
       code: value2,
       context: options2.context,
-      state: options2.state,
+      localState: options2.localState,
+      rootState: options2.rootState,
+      rootSetState: options2.rootSetState,
       event
     });
   }, "createEventHandler_7wCAiJVliNE", [
@@ -360,7 +386,9 @@ const isEmptyHtmlElement = (tagName) => {
 const getComponent = ({ block, context }) => {
   const componentName = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false
   }).component?.name;
@@ -381,7 +409,9 @@ const getRepeatItemData = ({ block, context }) => {
     return void 0;
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context
   });
   if (!Array.isArray(itemsArray))
@@ -391,8 +421,8 @@ const getRepeatItemData = ({ block, context }) => {
   const repeatArray = itemsArray.map((item, index) => ({
     context: {
       ...context,
-      state: {
-        ...context.state,
+      localState: {
+        ...context.localState,
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -403,20 +433,6 @@ const getRepeatItemData = ({ block, context }) => {
   }));
   return repeatArray;
 };
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      obj[prop] = value;
-      context.setState?.(obj);
-      return true;
-    }
-  });
-  return useState;
-};
 const RenderComponent = (props) => {
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
     children: props.componentRef ? /* @__PURE__ */ qwik._jsxC(props.componentRef, {
@@ -451,7 +467,9 @@ const RenderComponent = (props) => {
 const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   qwik.useContextProvider(builderContext, qwik.useStore({
     content: props.repeatContext.content,
-    state: props.repeatContext.state,
+    localState: props.repeatContext.localState,
+    rootState: props.repeatContext.rootState,
+    rootSetState: props.repeatContext.rootSetState,
     context: props.repeatContext.context,
     apiKey: props.repeatContext.apiKey,
     registeredComponents: props.repeatContext.registeredComponents,
@@ -478,7 +496,6 @@ const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qw
 const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   qwik._jsxBranch();
   const state = qwik.useStore({
-    proxyState: getProxyState(props.context),
     tag: props.block.tagName || "div"
   });
   const component = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
@@ -490,26 +507,28 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
   }, "RenderBlock_component_component_useComputed_qb7DMTJ9XGY", [
     props
   ]));
-  const repeatItemData = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
+  const repeatItem = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [props2] = qwik.useLexicalScope();
     return getRepeatItemData({
       block: props2.block,
       context: props2.context
     });
-  }, "RenderBlock_component_repeatItemData_useComputed_Q2wkGRsY3KE", [
+  }, "RenderBlock_component_repeatItem_useComputed_NslhinGDzrU", [
     props
   ]));
   const useBlock = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    const [props2, repeatItemData2] = qwik.useLexicalScope();
-    return repeatItemData2.value ? props2.block : getProcessedBlock({
+    const [props2, repeatItem2] = qwik.useLexicalScope();
+    return repeatItem2.value ? props2.block : getProcessedBlock({
       block: props2.block,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       context: props2.context.context,
       shouldEvaluateBindings: true
     });
   }, "RenderBlock_component_useBlock_useComputed_4ZTSqMpaluI", [
     props,
-    repeatItemData
+    repeatItem
   ]));
   const canShowBlock = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [useBlock2] = qwik.useLexicalScope();
@@ -522,15 +541,16 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     useBlock
   ]));
   const actions = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    const [props2, state2, useBlock2] = qwik.useLexicalScope();
+    const [props2, useBlock2] = qwik.useLexicalScope();
     return getBlockActions({
       block: useBlock2.value,
-      state: props2.context.state,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
+      localState: props2.context.localState,
       context: props2.context.context
     });
   }, "RenderBlock_component_actions_useComputed_AOTwdXfwCqY", [
     props,
-    state,
     useBlock
   ]));
   const attributes = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
@@ -545,12 +565,12 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     useBlock
   ]));
   const childrenWithoutParentComponent = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    const [component2, repeatItemData2, useBlock2] = qwik.useLexicalScope();
-    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItemData2.value;
+    const [component2, repeatItem2, useBlock2] = qwik.useLexicalScope();
+    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItem2.value;
     return shouldRenderChildrenOutsideRef ? useBlock2.value.children ?? [] : [];
   }, "RenderBlock_component_childrenWithoutParentComponent_useComputed_l4hT2V9liQc", [
     component,
-    repeatItemData,
+    repeatItem,
     useBlock
   ]));
   const childrenContext = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
@@ -561,10 +581,11 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     return {
       apiKey: props2.context.apiKey,
       apiVersion: props2.context.apiVersion,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       content: props2.context.content,
       context: props2.context.context,
-      setState: props2.context.setState,
       registeredComponents: props2.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles()
     };
@@ -603,7 +624,7 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
           ...attributes.value,
           ...actions.value
         }, 0, "9d_0") : null,
-        !isEmptyHtmlElement(state.tag) && repeatItemData.value ? (repeatItemData.value || []).map(function(data, index) {
+        !isEmptyHtmlElement(state.tag) && repeatItem.value ? (repeatItem.value || []).map(function(data, index) {
           return /* @__PURE__ */ qwik._jsxC(RenderRepeatedBlock, {
             get repeatContext() {
               return data.context;
@@ -617,7 +638,7 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
             }
           }, 3, index);
         }) : null,
-        !isEmptyHtmlElement(state.tag) && !repeatItemData.value ? /* @__PURE__ */ qwik._jsxC(state.tag, {
+        !isEmptyHtmlElement(state.tag) && !repeatItem.value ? /* @__PURE__ */ qwik._jsxC(state.tag, {
           ...attributes.value,
           ...actions.value,
           children: [
@@ -760,26 +781,28 @@ const getMobileStyle = function getMobileStyle2(props, state, builderContext2, {
   return state.stackAt === "never" ? desktopStyle : stackedStyle;
 };
 const columnCssVars = function columnCssVars2(props, state, builderContext2, index) {
-  index === 0 ? 0 : state.gutterSize;
+  const gutter = index === 0 ? 0 : state.gutterSize;
   const width = getColumnCssWidth(props, state, builderContext2, index);
-  const gutterPixels = `${state.gutterSize}px`;
+  const gutterPixels = `${gutter}px`;
+  const mobileWidth = "100%";
+  const mobileMarginLeft = 0;
   return {
     width,
     "margin-left": gutterPixels,
     "--column-width-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: "100%",
+      stackedStyle: mobileWidth,
       desktopStyle: width
     }),
     "--column-margin-left-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: 0,
+      stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     }),
     "--column-width-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: "100%",
+      stackedStyle: mobileWidth,
       desktopStyle: width
     }),
     "--column-margin-left-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: 0,
+      stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     })
   };
@@ -962,16 +985,17 @@ const Image = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl(
   const srcSetToUse = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [props2] = qwik.useLexicalScope();
     const imageToUse = props2.image || props2.src;
-    if (!imageToUse || !(imageToUse.match(/builder\.io/) || imageToUse.match(/cdn\.shopify\.com/)))
+    const url = imageToUse;
+    if (!url || !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
       return props2.srcset;
     if (props2.srcset && props2.image?.includes("builder.io/api/v1/image")) {
       if (!props2.srcset.includes(props2.image.split("?")[0])) {
         console.debug("Removed given srcset");
-        return getSrcSet(imageToUse);
+        return getSrcSet(url);
       }
     } else if (props2.image && !props2.srcset)
-      return getSrcSet(imageToUse);
-    return getSrcSet(imageToUse);
+      return getSrcSet(url);
+    return getSrcSet(url);
   }, "Image_component_srcSetToUse_useComputed_TZMibf9Gpvw", [
     props
   ]));
@@ -1388,6 +1412,7 @@ const componentInfo$7 = {
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
       onChange: serializeFn((options) => {
+        const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");
         function loadImage(url, timeout = 6e4) {
@@ -1418,10 +1443,10 @@ const componentInfo$7 = {
           if (blob.type.includes("svg"))
             options.set("noWebp", true);
         });
-        if (value && (!aspectRatio || aspectRatio === 0.7041))
+        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
           return loadImage(value).then((img) => {
             const possiblyUpdatedAspectRatio = options.get("aspectRatio");
-            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === 0.7041)) {
+            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
               if (img.width && img.height) {
                 options.set("aspectRatio", round2(img.height / img.width));
                 options.set("height", img.height);
@@ -1612,10 +1637,11 @@ const componentInfo$5 = {
     }
   ]
 };
+const MSG_PREFIX = "[Builder.io]: ";
 const logger = {
-  log: (...message) => console.log("[Builder.io]: ", ...message),
-  error: (...message) => console.error("[Builder.io]: ", ...message),
-  warn: (...message) => console.warn("[Builder.io]: ", ...message)
+  log: (...message) => console.log(MSG_PREFIX, ...message),
+  error: (...message) => console.error(MSG_PREFIX, ...message),
+  warn: (...message) => console.warn(MSG_PREFIX, ...message)
 };
 function getGlobalThis() {
   if (typeof globalThis !== "undefined")
@@ -1713,7 +1739,8 @@ const setCookie = async ({ name, value, expires, canTrack }) => {
     console.warn("[COOKIE] SET error: ", err);
   }
 };
-const getContentTestKey = (id) => `${"builderio.variations"}.${id}`;
+const BUILDER_STORE_PREFIX = "builderio.variations";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
 const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
   name: getContentTestKey(contentId),
   canTrack
@@ -1808,6 +1835,8 @@ function flatten(object, path = null, separator = ".") {
     };
   }, {});
 }
+const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
+const BUILDER_OPTIONS_PREFIX = "options.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
   searchParams.forEach((value, key) => {
@@ -1821,8 +1850,8 @@ const getBuilderSearchParams = (_options) => {
   const options = normalizeSearchParams(_options);
   const newOptions = {};
   Object.keys(options).forEach((key) => {
-    if (key.startsWith("builder.")) {
-      const trimmedKey = key.replace("builder.", "").replace("options.", "");
+    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
       newOptions[trimmedKey] = options[key];
     }
   });
@@ -1967,7 +1996,7 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
       get data() {
         return {
           ...props.symbol?.data,
-          ...builderContext$1.state,
+          ...builderContext$1.localState,
           ...state.contentToUse?.data?.state
         };
       },
@@ -1992,13 +2021,13 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQ
         ], "Object.values(p0.registeredComponents)"),
         data: qwik._fnSignal((p0, p1, p2) => ({
           ...p1.symbol?.data,
-          ...p0.state,
+          ...p0.localState,
           ...p2.contentToUse?.data?.state
         }), [
           builderContext$1,
           props,
           state
-        ], "{...p1.symbol?.data,...p0.state,...p2.contentToUse?.data?.state}"),
+        ], "{...p1.symbol?.data,...p0.localState,...p2.contentToUse?.data?.state}"),
         model: qwik._fnSignal((p0) => p0.symbol?.model, [
           props
         ], "p0.symbol?.model"),
@@ -2225,7 +2254,8 @@ const componentInfo$2 = {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");
-          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${"ae0e60e78201a3f2b0de4b"}`).then((res) => res.json()).then((data) => {
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
             if (options.get("url") === url) {
               if (data.html)
                 options.set("content", data.html);
@@ -2509,11 +2539,12 @@ function uuidv4() {
 function uuid() {
   return uuidv4().replace(/-/g, "");
 }
+const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
 const getSessionId = async ({ canTrack }) => {
   if (!canTrack)
     return void 0;
   const sessionId = await getCookie({
-    name: "builderSessionId",
+    name: SESSION_LOCAL_STORAGE_KEY,
     canTrack
   });
   if (checkIsDefined(sessionId))
@@ -2529,7 +2560,7 @@ const getSessionId = async ({ canTrack }) => {
 };
 const createSessionId = () => uuid();
 const setSessionId = ({ id, canTrack }) => setCookie({
-  name: "builderSessionId",
+  name: SESSION_LOCAL_STORAGE_KEY,
   value: id,
   canTrack
 });
@@ -2552,11 +2583,12 @@ const setLocalStorageItem = ({ key, canTrack, value }) => {
     console.debug("[LocalStorage] SET error: ", err);
   }
 };
+const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
 const getVisitorId = ({ canTrack }) => {
   if (!canTrack)
     return void 0;
   const visitorId = getLocalStorageItem({
-    key: "builderVisitorId",
+    key: VISITOR_LOCAL_STORAGE_KEY,
     canTrack
   });
   if (checkIsDefined(visitorId))
@@ -2572,7 +2604,7 @@ const getVisitorId = ({ canTrack }) => {
 };
 const createVisitorId = () => uuid();
 const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
-  key: "builderVisitorId",
+  key: VISITOR_LOCAL_STORAGE_KEY,
   value: id,
   canTrack
 });
@@ -2730,6 +2762,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
+const SDK_VERSION = "0.3.1";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -2797,6 +2830,7 @@ const setupBrowserForEditing = (options = {}) => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
+        version: SDK_VERSION,
         supportsPatchUpdates: false,
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true
@@ -2986,8 +3020,8 @@ const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakp
     }
   };
 };
-const setContextState = function setContextState2(props, state, elementRef, newState) {
-  state.contentState = newState;
+const contentSetState = function contentSetState2(props, state, elementRef, newRootState) {
+  state.contentState = newRootState;
 };
 const processMessage = function processMessage2(props, state, elementRef, event) {
   const { data } = event;
@@ -3021,7 +3055,9 @@ const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
     evaluate({
       code: jsCode,
       context: props.context || {},
-      state: state.contentState
+      localState: void 0,
+      rootState: state.contentState,
+      rootSetState: contentSetState.bind(null, props, state, elementRef)
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
@@ -3045,7 +3081,9 @@ const evalExpression = function evalExpression2(props, state, elementRef, expres
   return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
     code: group,
     context: props.context || {},
-    state: state.contentState
+    localState: void 0,
+    rootState: state.contentState,
+    rootSetState: contentSetState.bind(null, props, state, elementRef)
   }));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
@@ -3054,7 +3092,7 @@ const handleRequest = function handleRequest2(props, state, elementRef, { url, k
       ...state.contentState,
       [key]: json
     };
-    setContextState(props, state, elementRef, newState);
+    contentSetState(props, state, elementRef, newState);
   }).catch((err) => {
     console.error("error fetching dynamic data", url, err);
   });
@@ -3114,7 +3152,9 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
   });
   qwik.useContextProvider(builderContext, qwik.useStore({
     content: state.useContent,
-    state: state.contentState,
+    localState: void 0,
+    rootState: state.contentState,
+    rootSetState: void 0,
     context: props.context || {},
     apiKey: props.apiKey,
     apiVersion: props.apiVersion,
@@ -3170,7 +3210,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
               mergeNewContent(props2, state2, elementRef2, content);
           });
       }
-      evaluateJsCode(props2, state2);
+      evaluateJsCode(props2, state2, elementRef2);
       runHttpRequests(props2, state2, elementRef2);
       emitStateUpdate(props2, state2);
     }
@@ -3193,7 +3233,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
-    evaluateJsCode(props2, state2);
+    evaluateJsCode(props2, state2, elementRef2);
   }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,

package/lib/index.qwik.mjs

@@ -86,7 +86,7 @@ const getSizesForBreakpoints = ({ small, medium }) => {
   };
   return newSizes;
 };
-function evaluate({ code, context, state, event, isExpression = true }) {
+function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
   if (code === "") {
     console.warn("Skipping evaluation of empty code block.");
     return;
@@ -99,11 +99,29 @@ function evaluate({ code, context, state, event, isExpression = true }) {
   const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
+    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, flattenState(rootState, localState, rootSetState), context, event);
   } catch (e) {
     console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
   }
 }
+function flattenState(rootState, localState, rootSetState) {
+  if (rootState === localState)
+    throw new Error("rootState === localState");
+  return new Proxy(rootState, {
+    get: (_, prop) => {
+      if (localState && prop in localState)
+        return localState[prop];
+      return rootState[prop];
+    },
+    set: (_, prop, value) => {
+      if (localState && prop in localState)
+        throw new Error("Writing to local state is not allowed as it is read-only.");
+      rootState[prop] = value;
+      rootSetState?.(rootState);
+      return true;
+    }
+  });
+}
 const set = (obj, _path, value) => {
   if (Object(obj) !== obj)
     return obj;
@@ -114,7 +132,7 @@ const set = (obj, _path, value) => {
 function transformBlock(block) {
   return block;
 }
-const evaluateBindings = ({ block, context, state }) => {
+const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
   if (!block.bindings)
     return block;
   const copy = fastClone(block);
@@ -131,19 +149,23 @@ const evaluateBindings = ({ block, context, state }) => {
     const expression = block.bindings[binding];
     const value = evaluate({
       code: expression,
-      state,
+      localState,
+      rootState,
+      rootSetState,
       context
     });
     set(copied, binding, value);
   }
   return copied;
 };
-function getProcessedBlock({ block, context, shouldEvaluateBindings, state }) {
+function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
   const transformedBlock = transformBlock(block);
   if (shouldEvaluateBindings)
     return evaluateBindings({
       block: transformedBlock,
-      state,
+      localState,
+      rootState,
+      rootSetState,
       context
     });
   else
@@ -197,7 +219,9 @@ const BlockStyles = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     const [props2] = useLexicalScope();
     return getProcessedBlock({
       block: props2.block,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       context: props2.context.context,
       shouldEvaluateBindings: true
     });
@@ -271,7 +295,9 @@ function createEventHandler(value, options) {
     return evaluate({
       code: value2,
       context: options2.context,
-      state: options2.state,
+      localState: options2.localState,
+      rootState: options2.rootState,
+      rootSetState: options2.rootSetState,
       event
     });
   }, "createEventHandler_7wCAiJVliNE", [
@@ -358,7 +384,9 @@ const isEmptyHtmlElement = (tagName) => {
 const getComponent = ({ block, context }) => {
   const componentName = getProcessedBlock({
     block,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context,
     shouldEvaluateBindings: false
   }).component?.name;
@@ -379,7 +407,9 @@ const getRepeatItemData = ({ block, context }) => {
     return void 0;
   const itemsArray = evaluate({
     code: repeat.collection,
-    state: context.state,
+    localState: context.localState,
+    rootState: context.rootState,
+    rootSetState: context.rootSetState,
     context: context.context
   });
   if (!Array.isArray(itemsArray))
@@ -389,8 +419,8 @@ const getRepeatItemData = ({ block, context }) => {
   const repeatArray = itemsArray.map((item, index) => ({
     context: {
       ...context,
-      state: {
-        ...context.state,
+      localState: {
+        ...context.localState,
         $index: index,
         $item: item,
         [itemNameToUse]: item,
@@ -401,20 +431,6 @@ const getRepeatItemData = ({ block, context }) => {
   }));
   return repeatArray;
 };
-const getProxyState = (context) => {
-  if (typeof Proxy === "undefined") {
-    console.error("no Proxy available in this environment, cannot proxy state.");
-    return context.state;
-  }
-  const useState = new Proxy(context.state, {
-    set: (obj, prop, value) => {
-      obj[prop] = value;
-      context.setState?.(obj);
-      return true;
-    }
-  });
-  return useState;
-};
 const RenderComponent = (props) => {
   return /* @__PURE__ */ _jsxC(Fragment, {
     children: props.componentRef ? /* @__PURE__ */ _jsxC(props.componentRef, {
@@ -449,7 +465,9 @@ const RenderComponent = (props) => {
 const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   useContextProvider(builderContext, useStore({
     content: props.repeatContext.content,
-    state: props.repeatContext.state,
+    localState: props.repeatContext.localState,
+    rootState: props.repeatContext.rootState,
+    rootSetState: props.repeatContext.rootSetState,
     context: props.repeatContext.context,
     apiKey: props.repeatContext.apiKey,
     registeredComponents: props.repeatContext.registeredComponents,
@@ -476,7 +494,6 @@ const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlined
 const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   const state = useStore({
-    proxyState: getProxyState(props.context),
     tag: props.block.tagName || "div"
   });
   const component = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
@@ -488,26 +505,28 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
   }, "RenderBlock_component_component_useComputed_qb7DMTJ9XGY", [
     props
   ]));
-  const repeatItemData = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+  const repeatItem = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
     return getRepeatItemData({
       block: props2.block,
       context: props2.context
     });
-  }, "RenderBlock_component_repeatItemData_useComputed_Q2wkGRsY3KE", [
+  }, "RenderBlock_component_repeatItem_useComputed_NslhinGDzrU", [
     props
   ]));
   const useBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, repeatItemData2] = useLexicalScope();
-    return repeatItemData2.value ? props2.block : getProcessedBlock({
+    const [props2, repeatItem2] = useLexicalScope();
+    return repeatItem2.value ? props2.block : getProcessedBlock({
       block: props2.block,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       context: props2.context.context,
       shouldEvaluateBindings: true
     });
   }, "RenderBlock_component_useBlock_useComputed_4ZTSqMpaluI", [
     props,
-    repeatItemData
+    repeatItem
   ]));
   const canShowBlock = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [useBlock2] = useLexicalScope();
@@ -520,15 +539,16 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     useBlock
   ]));
   const actions = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [props2, state2, useBlock2] = useLexicalScope();
+    const [props2, useBlock2] = useLexicalScope();
     return getBlockActions({
       block: useBlock2.value,
-      state: props2.context.state,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
+      localState: props2.context.localState,
       context: props2.context.context
     });
   }, "RenderBlock_component_actions_useComputed_AOTwdXfwCqY", [
     props,
-    state,
     useBlock
   ]));
   const attributes = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
@@ -543,12 +563,12 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     useBlock
   ]));
   const childrenWithoutParentComponent = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [component2, repeatItemData2, useBlock2] = useLexicalScope();
-    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItemData2.value;
+    const [component2, repeatItem2, useBlock2] = useLexicalScope();
+    const shouldRenderChildrenOutsideRef = !component2.value?.component && !repeatItem2.value;
     return shouldRenderChildrenOutsideRef ? useBlock2.value.children ?? [] : [];
   }, "RenderBlock_component_childrenWithoutParentComponent_useComputed_l4hT2V9liQc", [
     component,
-    repeatItemData,
+    repeatItem,
     useBlock
   ]));
   const childrenContext = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
@@ -559,10 +579,11 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     return {
       apiKey: props2.context.apiKey,
       apiVersion: props2.context.apiVersion,
-      state: props2.context.state,
+      localState: props2.context.localState,
+      rootState: props2.context.rootState,
+      rootSetState: props2.context.rootSetState,
       content: props2.context.content,
       context: props2.context.context,
-      setState: props2.context.setState,
       registeredComponents: props2.context.registeredComponents,
       inheritedStyles: getInheritedTextStyles()
     };
@@ -601,7 +622,7 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           ...attributes.value,
           ...actions.value
         }, 0, "9d_0") : null,
-        !isEmptyHtmlElement(state.tag) && repeatItemData.value ? (repeatItemData.value || []).map(function(data, index) {
+        !isEmptyHtmlElement(state.tag) && repeatItem.value ? (repeatItem.value || []).map(function(data, index) {
           return /* @__PURE__ */ _jsxC(RenderRepeatedBlock, {
             get repeatContext() {
               return data.context;
@@ -615,7 +636,7 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
             }
           }, 3, index);
         }) : null,
-        !isEmptyHtmlElement(state.tag) && !repeatItemData.value ? /* @__PURE__ */ _jsxC(state.tag, {
+        !isEmptyHtmlElement(state.tag) && !repeatItem.value ? /* @__PURE__ */ _jsxC(state.tag, {
           ...attributes.value,
           ...actions.value,
           children: [
@@ -758,26 +779,28 @@ const getMobileStyle = function getMobileStyle2(props, state, builderContext2, {
   return state.stackAt === "never" ? desktopStyle : stackedStyle;
 };
 const columnCssVars = function columnCssVars2(props, state, builderContext2, index) {
-  index === 0 ? 0 : state.gutterSize;
+  const gutter = index === 0 ? 0 : state.gutterSize;
   const width = getColumnCssWidth(props, state, builderContext2, index);
-  const gutterPixels = `${state.gutterSize}px`;
+  const gutterPixels = `${gutter}px`;
+  const mobileWidth = "100%";
+  const mobileMarginLeft = 0;
   return {
     width,
     "margin-left": gutterPixels,
     "--column-width-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: "100%",
+      stackedStyle: mobileWidth,
       desktopStyle: width
     }),
     "--column-margin-left-mobile": getMobileStyle(props, state, builderContext2, {
-      stackedStyle: 0,
+      stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     }),
     "--column-width-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: "100%",
+      stackedStyle: mobileWidth,
       desktopStyle: width
     }),
     "--column-margin-left-tablet": getTabletStyle(props, state, builderContext2, {
-      stackedStyle: 0,
+      stackedStyle: mobileMarginLeft,
       desktopStyle: gutterPixels
     })
   };
@@ -960,16 +983,17 @@ const Image = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
   const srcSetToUse = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
     const imageToUse = props2.image || props2.src;
-    if (!imageToUse || !(imageToUse.match(/builder\.io/) || imageToUse.match(/cdn\.shopify\.com/)))
+    const url = imageToUse;
+    if (!url || !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/)))
       return props2.srcset;
     if (props2.srcset && props2.image?.includes("builder.io/api/v1/image")) {
       if (!props2.srcset.includes(props2.image.split("?")[0])) {
         console.debug("Removed given srcset");
-        return getSrcSet(imageToUse);
+        return getSrcSet(url);
       }
     } else if (props2.image && !props2.srcset)
-      return getSrcSet(imageToUse);
-    return getSrcSet(imageToUse);
+      return getSrcSet(url);
+    return getSrcSet(url);
   }, "Image_component_srcSetToUse_useComputed_TZMibf9Gpvw", [
     props
   ]));
@@ -1386,6 +1410,7 @@ const componentInfo$7 = {
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
       onChange: serializeFn((options) => {
+        const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");
         function loadImage(url, timeout = 6e4) {
@@ -1416,10 +1441,10 @@ const componentInfo$7 = {
           if (blob.type.includes("svg"))
             options.set("noWebp", true);
         });
-        if (value && (!aspectRatio || aspectRatio === 0.7041))
+        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO))
           return loadImage(value).then((img) => {
             const possiblyUpdatedAspectRatio = options.get("aspectRatio");
-            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === 0.7041)) {
+            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
               if (img.width && img.height) {
                 options.set("aspectRatio", round2(img.height / img.width));
                 options.set("height", img.height);
@@ -1610,10 +1635,11 @@ const componentInfo$5 = {
     }
   ]
 };
+const MSG_PREFIX = "[Builder.io]: ";
 const logger = {
-  log: (...message) => console.log("[Builder.io]: ", ...message),
-  error: (...message) => console.error("[Builder.io]: ", ...message),
-  warn: (...message) => console.warn("[Builder.io]: ", ...message)
+  log: (...message) => console.log(MSG_PREFIX, ...message),
+  error: (...message) => console.error(MSG_PREFIX, ...message),
+  warn: (...message) => console.warn(MSG_PREFIX, ...message)
 };
 function getGlobalThis() {
   if (typeof globalThis !== "undefined")
@@ -1711,7 +1737,8 @@ const setCookie = async ({ name, value, expires, canTrack }) => {
     console.warn("[COOKIE] SET error: ", err);
   }
 };
-const getContentTestKey = (id) => `${"builderio.variations"}.${id}`;
+const BUILDER_STORE_PREFIX = "builderio.variations";
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
 const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
   name: getContentTestKey(contentId),
   canTrack
@@ -1806,6 +1833,8 @@ function flatten(object, path = null, separator = ".") {
     };
   }, {});
 }
+const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
+const BUILDER_OPTIONS_PREFIX = "options.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
   searchParams.forEach((value, key) => {
@@ -1819,8 +1848,8 @@ const getBuilderSearchParams = (_options) => {
   const options = normalizeSearchParams(_options);
   const newOptions = {};
   Object.keys(options).forEach((key) => {
-    if (key.startsWith("builder.")) {
-      const trimmedKey = key.replace("builder.", "").replace("options.", "");
+    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
       newOptions[trimmedKey] = options[key];
     }
   });
@@ -1965,7 +1994,7 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
       get data() {
         return {
           ...props.symbol?.data,
-          ...builderContext$1.state,
+          ...builderContext$1.localState,
           ...state.contentToUse?.data?.state
         };
       },
@@ -1990,13 +2019,13 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props)
         ], "Object.values(p0.registeredComponents)"),
         data: _fnSignal((p0, p1, p2) => ({
           ...p1.symbol?.data,
-          ...p0.state,
+          ...p0.localState,
           ...p2.contentToUse?.data?.state
         }), [
           builderContext$1,
           props,
           state
-        ], "{...p1.symbol?.data,...p0.state,...p2.contentToUse?.data?.state}"),
+        ], "{...p1.symbol?.data,...p0.localState,...p2.contentToUse?.data?.state}"),
         model: _fnSignal((p0) => p0.symbol?.model, [
           props
         ], "p0.symbol?.model"),
@@ -2223,7 +2252,8 @@ const componentInfo$2 = {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");
-          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${"ae0e60e78201a3f2b0de4b"}`).then((res) => res.json()).then((data) => {
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
             if (options.get("url") === url) {
               if (data.html)
                 options.set("content", data.html);
@@ -2507,11 +2537,12 @@ function uuidv4() {
 function uuid() {
   return uuidv4().replace(/-/g, "");
 }
+const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
 const getSessionId = async ({ canTrack }) => {
   if (!canTrack)
     return void 0;
   const sessionId = await getCookie({
-    name: "builderSessionId",
+    name: SESSION_LOCAL_STORAGE_KEY,
     canTrack
   });
   if (checkIsDefined(sessionId))
@@ -2527,7 +2558,7 @@ const getSessionId = async ({ canTrack }) => {
 };
 const createSessionId = () => uuid();
 const setSessionId = ({ id, canTrack }) => setCookie({
-  name: "builderSessionId",
+  name: SESSION_LOCAL_STORAGE_KEY,
   value: id,
   canTrack
 });
@@ -2550,11 +2581,12 @@ const setLocalStorageItem = ({ key, canTrack, value }) => {
     console.debug("[LocalStorage] SET error: ", err);
   }
 };
+const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
 const getVisitorId = ({ canTrack }) => {
   if (!canTrack)
     return void 0;
   const visitorId = getLocalStorageItem({
-    key: "builderVisitorId",
+    key: VISITOR_LOCAL_STORAGE_KEY,
     canTrack
   });
   if (checkIsDefined(visitorId))
@@ -2570,7 +2602,7 @@ const getVisitorId = ({ canTrack }) => {
 };
 const createVisitorId = () => uuid();
 const setVisitorId = ({ id, canTrack }) => setLocalStorageItem({
-  key: "builderVisitorId",
+  key: VISITOR_LOCAL_STORAGE_KEY,
   value: id,
   canTrack
 });
@@ -2728,6 +2760,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
+const SDK_VERSION = "0.3.1";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -2795,6 +2828,7 @@ const setupBrowserForEditing = (options = {}) => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
+        version: SDK_VERSION,
         supportsPatchUpdates: false,
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true
@@ -2984,8 +3018,8 @@ const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakp
     }
   };
 };
-const setContextState = function setContextState2(props, state, elementRef, newState) {
-  state.contentState = newState;
+const contentSetState = function contentSetState2(props, state, elementRef, newRootState) {
+  state.contentState = newRootState;
 };
 const processMessage = function processMessage2(props, state, elementRef, event) {
   const { data } = event;
@@ -3019,7 +3053,9 @@ const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
     evaluate({
       code: jsCode,
       context: props.context || {},
-      state: state.contentState
+      localState: void 0,
+      rootState: state.contentState,
+      rootSetState: contentSetState.bind(null, props, state, elementRef)
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
@@ -3043,7 +3079,9 @@ const evalExpression = function evalExpression2(props, state, elementRef, expres
   return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
     code: group,
     context: props.context || {},
-    state: state.contentState
+    localState: void 0,
+    rootState: state.contentState,
+    rootSetState: contentSetState.bind(null, props, state, elementRef)
   }));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
@@ -3052,7 +3090,7 @@ const handleRequest = function handleRequest2(props, state, elementRef, { url, k
       ...state.contentState,
       [key]: json
     };
-    setContextState(props, state, elementRef, newState);
+    contentSetState(props, state, elementRef, newState);
   }).catch((err) => {
     console.error("error fetching dynamic data", url, err);
   });
@@ -3112,7 +3150,9 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   });
   useContextProvider(builderContext, useStore({
     content: state.useContent,
-    state: state.contentState,
+    localState: void 0,
+    rootState: state.contentState,
+    rootSetState: void 0,
     context: props.context || {},
     apiKey: props.apiKey,
     apiVersion: props.apiVersion,
@@ -3168,7 +3208,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
               mergeNewContent(props2, state2, elementRef2, content);
           });
       }
-      evaluateJsCode(props2, state2);
+      evaluateJsCode(props2, state2, elementRef2);
       runHttpRequests(props2, state2, elementRef2);
       emitStateUpdate(props2, state2);
     }
@@ -3191,7 +3231,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     const [elementRef2, props2, state2] = useLexicalScope();
     track2(() => state2.useContent?.data?.jsCode);
     track2(() => state2.contentState);
-    evaluateJsCode(props2, state2);
+    evaluateJsCode(props2, state2, elementRef2);
   }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
     props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",
@@ -22,18 +22,15 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "build": "tsc && vite build --mode lib",
-    "release:patch": "yarn run build && npm version patch && npm publish",
-    "release:minor": "yarn run build && npm version minor && npm publish",
-    "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
+    "build": "tsc && vite build --mode lib"
   },
   "devDependencies": {
-    "@builder.io/qwik": "^0.101.0",
+    "@builder.io/qwik": "^1.0.0",
     "@types/node": "latest",
     "typescript": "^4",
     "vite": "^3.0.4"
   },
   "peerDependencies": {
-    "@builder.io/qwik": ">=0.13.3"
+    "@builder.io/qwik": ">=1.0.0"
   }
 }

package/types/components/render-block/render-block.helpers.d.ts

@@ -10,4 +10,3 @@ export declare const getRepeatItemData: ({ block, context, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => RepeatData[] | undefined;
-export declare const getProxyState: (context: BuilderContextInterface) => BuilderContextInterface['state'];

package/types/components/render-content/render-content.d.ts

@@ -3,7 +3,7 @@ import { Breakpoints, BuilderContent } from "../../types/builder-content.js";
 import { RenderContentProps } from "./render-content.types.js";
 export declare const mergeNewContent: (props: any, state: any, elementRef: any, newContent: BuilderContent) => void;
 export declare const setBreakpoints: (props: any, state: any, elementRef: any, breakpoints: Breakpoints) => void;
-export declare const setContextState: (props: any, state: any, elementRef: any, newState: BuilderRenderState) => void;
+export declare const contentSetState: (props: any, state: any, elementRef: any, newRootState: BuilderRenderState) => void;
 export declare const processMessage: (props: any, state: any, elementRef: any, event: MessageEvent) => void;
 export declare const evaluateJsCode: (props: any, state: any, elementRef: any) => void;
 export declare const onClick: (props: any, state: any, elementRef: any, event: any) => void;

package/types/components/render-content-variants/helpers.d.ts

@@ -1,3 +1,9 @@
+import type { Nullable } from '../../helpers/nullable';
+import type { BuilderContent } from '../../types/builder-content';
+export declare const checkShouldRunVariants: ({ canTrack, content, }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
 type VariantData = {
     id: string;
     testRatio?: number;

package/types/constants/sdk-version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.3.1";

package/types/context/types.d.ts

@@ -11,8 +11,23 @@ export type BuilderRenderContext = Record<string, unknown>;
 export interface BuilderContextInterface {
     content: Nullable<BuilderContent>;
     context: BuilderRenderContext;
-    state: BuilderRenderState;
-    setState?: (state: BuilderRenderState) => void;
+    /**
+     * The state of the application.
+     *
+     * NOTE: see `localState` below to understand how it is different from `rootState`.
+     */
+    rootState: BuilderRenderState;
+    /**
+     * Some frameworks have a `setState` function which needs to be invoked to notify
+     * the framework of state change. (other frameworks don't in which case it is `undefined')
+     */
+    rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+    /**
+     * The local state of the current component. This is different from `rootState` in that
+     * it can be a child state created by a repeater containing local state.
+     * The `rootState` is where all of the state mutations are actually stored.
+     */
+    localState: BuilderRenderState | undefined;
     apiKey: string | null;
     apiVersion: ApiVersion | undefined;
     registeredComponents: RegisteredComponents;

package/types/functions/evaluate.d.ts

@@ -1,6 +1,7 @@
-import type { BuilderContextInterface } from '../context/types.js';
-export declare function evaluate({ code, context, state, event, isExpression, }: {
+import type { BuilderContextInterface, BuilderRenderState } from '../context/types.js';
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression, }: {
     code: string;
     event?: Event;
     isExpression?: boolean;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): any;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): any;
+export declare function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState;

package/types/functions/evaluate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/functions/get-block-actions-handler.d.ts

@@ -2,4 +2,4 @@ import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 export declare function createEventHandler(value: string, options: {
     block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): (event: Event) => any;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): (event: Event) => any;

package/types/functions/get-block-actions.d.ts

@@ -5,5 +5,5 @@ type Actions = {
 };
 export declare function getBlockActions(options: {
     block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): Actions;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): Actions;
 export {};

package/types/functions/get-processed-block.d.ts

@@ -1,10 +1,10 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }: {
+export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState, }: {
     block: BuilderBlock;
     /**
      * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
      * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
      */
     shouldEvaluateBindings: boolean;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock;

package/types/helpers/canTrack.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultCanTrack: (canTrack?: boolean) => boolean;