@builder.io/sdk-qwik 0.4.1 → 0.4.2

package/lib/index.qwik.cjs

@@ -456,38 +456,32 @@ const RenderComponent = (props) => {
   }, 1, "R9_1");
 };
 const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
-  qwik.useContextProvider(BuilderContext, qwik.useStore({
-    content: props.repeatContext.content,
-    localState: props.repeatContext.localState,
-    rootState: props.repeatContext.rootState,
-    rootSetState: props.repeatContext.rootSetState,
-    context: props.repeatContext.context,
-    apiKey: props.repeatContext.apiKey,
-    registeredComponents: props.repeatContext.registeredComponents,
-    inheritedStyles: props.repeatContext.inheritedStyles,
-    apiVersion: props.repeatContext.apiVersion
-  }));
+  const state = qwik.useStore({
+    store: props.repeatContext
+  });
+  qwik.useContextProvider(BuilderContext, state.store);
   return /* @__PURE__ */ qwik._jsxC(RenderBlock, {
     get block() {
       return props.block;
     },
     get context() {
-      return props.repeatContext;
+      return state.store;
     },
     [qwik._IMMUTABLE]: {
       block: qwik._fnSignal((p0) => p0.block, [
         props
       ], "p0.block"),
-      context: qwik._fnSignal((p0) => p0.repeatContext, [
-        props
-      ], "p0.repeatContext")
+      context: qwik._fnSignal((p0) => p0.store, [
+        state
+      ], "p0.store")
     }
   }, 3, "K5_0");
 }, "RenderRepeatedBlock_component_nRyVBtbGKc8"));
 const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   qwik._jsxBranch();
   const state = qwik.useStore({
-    Tag: props.block.tagName || "div"
+    Tag: props.block.tagName || "div",
+    childrenContext: props.context
   });
   const component = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [props2] = qwik.useLexicalScope();
@@ -564,29 +558,8 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
     repeatItem,
     useBlock
   ]));
-  const childrenContext = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    const [attributes2, props2, useBlock2] = qwik.useLexicalScope();
-    const getInheritedTextStyles = () => {
-      return {};
-    };
-    return {
-      apiKey: props2.context.apiKey,
-      apiVersion: props2.context.apiVersion,
-      localState: props2.context.localState,
-      rootState: props2.context.rootState,
-      rootSetState: props2.context.rootSetState,
-      content: props2.context.content,
-      context: props2.context.context,
-      registeredComponents: props2.context.registeredComponents,
-      inheritedStyles: getInheritedTextStyles()
-    };
-  }, "RenderBlock_component_childrenContext_useComputed_gskFnyBnHDI", [
-    attributes,
-    props,
-    useBlock
-  ]));
   const renderComponentProps = qwik.useComputedQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
-    const [actions2, attributes2, childrenContext2, component2, useBlock2] = qwik.useLexicalScope();
+    const [actions2, attributes2, component2, state2, useBlock2] = qwik.useLexicalScope();
     return {
       blockChildren: useBlock2.value.children ?? [],
       componentRef: component2.value?.component,
@@ -599,13 +572,13 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
           }
         }
       },
-      context: childrenContext2.value
+      context: state2.childrenContext
     };
   }, "RenderBlock_component_renderComponentProps_useComputed_tWa1cp0r7XY", [
     actions,
     attributes,
-    childrenContext,
     component,
+    state,
     useBlock
   ]));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
@@ -640,12 +613,12 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
               return /* @__PURE__ */ qwik._jsxC(RenderBlock, {
                 block: child,
                 get context() {
-                  return childrenContext.value;
+                  return state.childrenContext;
                 },
                 [qwik._IMMUTABLE]: {
-                  context: qwik._fnSignal((p0) => p0.value, [
-                    childrenContext
-                  ], "p0.value")
+                  context: qwik._fnSignal((p0) => p0.childrenContext, [
+                    state
+                  ], "p0.childrenContext")
                 }
               }, 3, "render-block-" + child.id);
             }),
@@ -653,12 +626,12 @@ const RenderBlock = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
               return /* @__PURE__ */ qwik._jsxC(BlockStyles, {
                 block: child,
                 get context() {
-                  return childrenContext.value;
+                  return state.childrenContext;
                 },
                 [qwik._IMMUTABLE]: {
-                  context: qwik._fnSignal((p0) => p0.value, [
-                    childrenContext
-                  ], "p0.value")
+                  context: qwik._fnSignal((p0) => p0.childrenContext, [
+                    state
+                  ], "p0.childrenContext")
                 }
               }, 3, "block-style-" + child.id);
             })
@@ -716,6 +689,14 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
       builderContext,
       props,
       state
+    ]),
+    onKeyPress$: /* @__PURE__ */ qwik.inlinedQrl((event) => {
+      const [builderContext2, props2, state2] = qwik.useLexicalScope();
+      return onClick$1(props2);
+    }, "RenderBlocks_component_div_onKeyPress_N5bJZwtuEmI", [
+      builderContext,
+      props,
+      state
     ])
   }, {
     class: qwik._fnSignal((p0) => p0.value + " div-RenderBlocks", [
@@ -1950,7 +1931,9 @@ const componentInfo$1 = {
         "jpeg",
         "jpg",
         "png",
-        "svg"
+        "svg",
+        "gif",
+        "webp"
       ],
       required: true
     }
@@ -2671,7 +2654,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const SDK_VERSION = "0.4.1";
+const SDK_VERSION = "0.4.2";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -3028,31 +3011,31 @@ const getContentInitialValue = ({ content, data }) => {
   };
 };
 const mergeNewContent = function mergeNewContent2(props, state, elementRef, newContent) {
-  state.useContent = {
-    ...state.useContent,
+  state.builderContextSignal.content = {
+    ...state.builderContextSignal.content,
     ...newContent,
     data: {
-      ...state.useContent?.data,
+      ...state.builderContextSignal.content?.data,
       ...newContent?.data
     },
     meta: {
-      ...state.useContent?.meta,
+      ...state.builderContextSignal.content?.meta,
       ...newContent?.meta,
-      breakpoints: newContent?.meta?.breakpoints || state.useContent?.meta?.breakpoints
+      breakpoints: newContent?.meta?.breakpoints || state.builderContextSignal.content?.meta?.breakpoints
     }
   };
 };
 const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakpoints) {
-  state.useContent = {
-    ...state.useContent,
+  state.builderContextSignal.content = {
+    ...state.builderContextSignal.content,
     meta: {
-      ...state.useContent?.meta,
+      ...state.builderContextSignal.content?.meta,
       breakpoints
     }
   };
 };
 const contentSetState = function contentSetState2(props, state, elementRef, newRootState) {
-  state.contentState = newRootState;
+  state.builderContextSignal.rootState = newRootState;
 };
 const processMessage = function processMessage2(props, state, elementRef, event) {
   const { data } = event;
@@ -3061,7 +3044,7 @@ const processMessage = function processMessage2(props, state, elementRef, event)
       case "builder.configureSdk": {
         const messageContent = data.data;
         const { breakpoints, contentId } = messageContent;
-        if (!contentId || contentId !== state.useContent?.id)
+        if (!contentId || contentId !== state.builderContextSignal.content?.id)
           return;
         if (breakpoints)
           setBreakpoints(props, state, elementRef, breakpoints);
@@ -3081,20 +3064,20 @@ const processMessage = function processMessage2(props, state, elementRef, event)
     }
 };
 const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
-  const jsCode = state.useContent?.data?.jsCode;
+  const jsCode = state.builderContextSignal.content?.data?.jsCode;
   if (jsCode)
     evaluate({
       code: jsCode,
       context: props.context || {},
       localState: void 0,
-      rootState: state.contentState,
+      rootState: state.builderContextSignal.rootState,
       rootSetState: contentSetState.bind(null, props, state, elementRef)
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
-  if (state.useContent) {
-    const variationId = state.useContent?.testVariationId;
-    const contentId = state.useContent?.id;
+  if (state.builderContextSignal.content) {
+    const variationId = state.builderContextSignal.content?.testVariationId;
+    const contentId = state.builderContextSignal.content?.id;
     _track({
       type: "click",
       canTrack: state.canTrackToUse,
@@ -3113,14 +3096,14 @@ const evalExpression = function evalExpression2(props, state, elementRef, expres
     code: group,
     context: props.context || {},
     localState: void 0,
-    rootState: state.contentState,
+    rootState: state.builderContextSignal.rootState,
     rootSetState: contentSetState.bind(null, props, state, elementRef)
   }));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
   fetch$1(url).then((response) => response.json()).then((json) => {
     const newState = {
-      ...state.contentState,
+      ...state.builderContextSignal.rootState,
       [key]: json
     };
     contentSetState(props, state, elementRef, newState);
@@ -3129,7 +3112,7 @@ const handleRequest = function handleRequest2(props, state, elementRef, { url, k
   });
 };
 const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
-  const requests = state.useContent?.data?.httpRequests ?? {};
+  const requests = state.builderContextSignal.content?.data?.httpRequests ?? {};
   Object.entries(requests).forEach(([key, url]) => {
     if (url && (!state.httpReqsData[key] || isEditing())) {
       const evaluatedUrl = evalExpression(props, state, elementRef, url);
@@ -3144,7 +3127,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
   if (isEditing())
     window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
       detail: {
-        state: state.contentState,
+        state: state.builderContextSignal.rootState,
         ref: {
           name: props.model
         }
@@ -3155,24 +3138,36 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
   qwik._jsxBranch();
   const elementRef = qwik.useSignal();
   const state = qwik.useStore({
-    allRegisteredComponents: [
-      ...getDefaultRegisteredComponents(),
-      ...components,
-      ...props.customComponents || []
-    ].reduce((acc, { component, ...curr }) => ({
-      ...acc,
-      [curr.name]: {
-        component,
-        ...curr
-      }
-    }), {}),
+    builderContextSignal: {
+      content: getContentInitialValue({
+        content: props.content,
+        data: props.data
+      }),
+      localState: void 0,
+      rootState: getContextStateInitialValue({
+        content: props.content,
+        data: props.data,
+        locale: props.locale
+      }),
+      rootSetState: void 0,
+      context: props.context || {},
+      apiKey: props.apiKey,
+      apiVersion: props.apiVersion,
+      registeredComponents: [
+        ...getDefaultRegisteredComponents(),
+        ...components,
+        ...props.customComponents || []
+      ].reduce((acc, { component, ...curr }) => ({
+        ...acc,
+        [curr.name]: {
+          component,
+          ...curr
+        }
+      }), {}),
+      inheritedStyles: {}
+    },
     canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
     clicked: false,
-    contentState: getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale
-    }),
     forceReRenderCount: 0,
     httpReqsData: {},
     overrideContent: null,
@@ -3180,25 +3175,11 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
       contentId: props.content?.id,
       parentContentId: props.parentContentId
     }),
-    update: 0,
-    useContent: getContentInitialValue({
-      content: props.content,
-      data: props.data
-    })
+    update: 0
   }, {
     deep: true
   });
-  qwik.useContextProvider(BuilderContext, qwik.useStore({
-    content: state.useContent,
-    localState: void 0,
-    rootState: state.contentState,
-    rootSetState: void 0,
-    context: props.context || {},
-    apiKey: props.apiKey,
-    apiVersion: props.apiVersion,
-    registeredComponents: state.allRegisteredComponents,
-    inheritedStyles: {}
-  }));
+  qwik.useContextProvider(BuilderContext, state.builderContextSignal);
   qwik.useVisibleTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(() => {
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
     if (!props2.apiKey)
@@ -3218,16 +3199,16 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
             enrich: props2.enrich
           } : {}
         });
-        Object.values(state2.allRegisteredComponents).forEach((registeredComponent) => {
+        Object.values(state2.builderContextSignal.registeredComponents).forEach((registeredComponent) => {
           const message = createRegisterComponentMessage(registeredComponent);
           window.parent?.postMessage(message, "*");
         });
         window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
       }
-      if (state2.useContent) {
-        const variationId = state2.useContent?.testVariationId;
-        const contentId = state2.useContent?.id;
+      if (state2.builderContextSignal.content) {
+        const variationId = state2.builderContextSignal.content?.testVariationId;
+        const contentId = state2.builderContextSignal.content?.id;
         _track({
           type: "impression",
           canTrack: state2.canTrackToUse,
@@ -3272,8 +3253,8 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
   ]));
   qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
-    track2(() => state2.useContent?.data?.jsCode);
-    track2(() => state2.contentState);
+    track2(() => state2.builderContextSignal.content?.data?.jsCode);
+    track2(() => state2.builderContextSignal.rootState);
     evaluateJsCode(props2, state2, elementRef2);
   }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
@@ -3282,7 +3263,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
   ]));
   qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
-    track2(() => state2.useContent?.data?.httpRequests);
+    track2(() => state2.builderContextSignal.content?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
   }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
     elementRef,
@@ -3291,7 +3272,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
   ]));
   qwik.useTaskQrl(/* @__PURE__ */ qwik.inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = qwik.useLexicalScope();
-    track2(() => state2.contentState);
+    track2(() => state2.builderContextSignal.rootState);
     emitStateUpdate(props2, state2);
   }, "RenderContent_component_useTask_3_xLCHvjhJYRM", [
     elementRef,
@@ -3299,7 +3280,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
     state
   ]));
   return /* @__PURE__ */ qwik._jsxC(jsxRuntime.Fragment, {
-    children: state.useContent ? /* @__PURE__ */ qwik._jsxS("div", {
+    children: state.builderContextSignal.content ? /* @__PURE__ */ qwik._jsxS("div", {
       ref: elementRef,
       ...{},
       ...props.hideContent ? {
@@ -3314,34 +3295,34 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
         }, null, 3, "03_0") : null,
         /* @__PURE__ */ qwik._jsxC(RenderContentStyles, {
           get contentId() {
-            return state.useContent?.id;
+            return state.builderContextSignal.content?.id;
           },
           get cssCode() {
-            return state.useContent?.data?.cssCode;
+            return state.builderContextSignal.content?.data?.cssCode;
           },
           get customFonts() {
-            return state.useContent?.data?.customFonts;
+            return state.builderContextSignal.content?.data?.customFonts;
           },
           [qwik._IMMUTABLE]: {
-            contentId: qwik._fnSignal((p0) => p0.useContent?.id, [
+            contentId: qwik._fnSignal((p0) => p0.builderContextSignal.content?.id, [
               state
-            ], "p0.useContent?.id"),
-            cssCode: qwik._fnSignal((p0) => p0.useContent?.data?.cssCode, [
+            ], "p0.builderContextSignal.content?.id"),
+            cssCode: qwik._fnSignal((p0) => p0.builderContextSignal.content?.data?.cssCode, [
               state
-            ], "p0.useContent?.data?.cssCode"),
-            customFonts: qwik._fnSignal((p0) => p0.useContent?.data?.customFonts, [
+            ], "p0.builderContextSignal.content?.data?.cssCode"),
+            customFonts: qwik._fnSignal((p0) => p0.builderContextSignal.content?.data?.customFonts, [
               state
-            ], "p0.useContent?.data?.customFonts")
+            ], "p0.builderContextSignal.content?.data?.customFonts")
           }
         }, 3, "03_1"),
         /* @__PURE__ */ qwik._jsxC(RenderBlocks, {
           get blocks() {
-            return state.useContent?.data?.blocks;
+            return state.builderContextSignal.content?.data?.blocks;
           },
           [qwik._IMMUTABLE]: {
-            blocks: qwik._fnSignal((p0) => p0.useContent?.data?.blocks, [
+            blocks: qwik._fnSignal((p0) => p0.builderContextSignal.content?.data?.blocks, [
               state
-            ], "p0.useContent?.data?.blocks")
+            ], "p0.builderContextSignal.content?.data?.blocks")
           }
         }, 3, state.forceReRenderCount)
       ],
@@ -3354,9 +3335,9 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inl
         state
       ])
     }, {
-      "builder-content-id": qwik._fnSignal((p0) => p0.useContent?.id, [
+      "builder-content-id": qwik._fnSignal((p0) => p0.builderContextSignal.content?.id, [
         state
-      ], "p0.useContent?.id"),
+      ], "p0.builderContextSignal.content?.id"),
       "builder-model": qwik._fnSignal((p0) => p0.model, [
         props
       ], "p0.model"),

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxS, _fnSignal, createContextId, _jsxQ, _jsxBranch, useComputedQrl, useLexicalScope, _IMMUTABLE, _wrapProp, useContextProvider, useStore, useContext, Slot, Fragment as Fragment$1, useSignal, useTaskQrl, useVisibleTaskQrl } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, useStylesScopedQrl, _jsxC, _jsxS, _fnSignal, createContextId, _jsxQ, _jsxBranch, useComputedQrl, useLexicalScope, _IMMUTABLE, _wrapProp, useStore, useContextProvider, useContext, Slot, Fragment as Fragment$1, useSignal, useTaskQrl, useVisibleTaskQrl } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Button = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   useStylesScopedQrl(/* @__PURE__ */ inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
@@ -454,38 +454,32 @@ const RenderComponent = (props) => {
   }, 1, "R9_1");
 };
 const RenderRepeatedBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  useContextProvider(BuilderContext, useStore({
-    content: props.repeatContext.content,
-    localState: props.repeatContext.localState,
-    rootState: props.repeatContext.rootState,
-    rootSetState: props.repeatContext.rootSetState,
-    context: props.repeatContext.context,
-    apiKey: props.repeatContext.apiKey,
-    registeredComponents: props.repeatContext.registeredComponents,
-    inheritedStyles: props.repeatContext.inheritedStyles,
-    apiVersion: props.repeatContext.apiVersion
-  }));
+  const state = useStore({
+    store: props.repeatContext
+  });
+  useContextProvider(BuilderContext, state.store);
   return /* @__PURE__ */ _jsxC(RenderBlock, {
     get block() {
       return props.block;
     },
     get context() {
-      return props.repeatContext;
+      return state.store;
     },
     [_IMMUTABLE]: {
       block: _fnSignal((p0) => p0.block, [
         props
       ], "p0.block"),
-      context: _fnSignal((p0) => p0.repeatContext, [
-        props
-      ], "p0.repeatContext")
+      context: _fnSignal((p0) => p0.store, [
+        state
+      ], "p0.store")
     }
   }, 3, "K5_0");
 }, "RenderRepeatedBlock_component_nRyVBtbGKc8"));
 const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   _jsxBranch();
   const state = useStore({
-    Tag: props.block.tagName || "div"
+    Tag: props.block.tagName || "div",
+    childrenContext: props.context
   });
   const component = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [props2] = useLexicalScope();
@@ -562,29 +556,8 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
     repeatItem,
     useBlock
   ]));
-  const childrenContext = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [attributes2, props2, useBlock2] = useLexicalScope();
-    const getInheritedTextStyles = () => {
-      return {};
-    };
-    return {
-      apiKey: props2.context.apiKey,
-      apiVersion: props2.context.apiVersion,
-      localState: props2.context.localState,
-      rootState: props2.context.rootState,
-      rootSetState: props2.context.rootSetState,
-      content: props2.context.content,
-      context: props2.context.context,
-      registeredComponents: props2.context.registeredComponents,
-      inheritedStyles: getInheritedTextStyles()
-    };
-  }, "RenderBlock_component_childrenContext_useComputed_gskFnyBnHDI", [
-    attributes,
-    props,
-    useBlock
-  ]));
   const renderComponentProps = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
-    const [actions2, attributes2, childrenContext2, component2, useBlock2] = useLexicalScope();
+    const [actions2, attributes2, component2, state2, useBlock2] = useLexicalScope();
     return {
       blockChildren: useBlock2.value.children ?? [],
       componentRef: component2.value?.component,
@@ -597,13 +570,13 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
           }
         }
       },
-      context: childrenContext2.value
+      context: state2.childrenContext
     };
   }, "RenderBlock_component_renderComponentProps_useComputed_tWa1cp0r7XY", [
     actions,
     attributes,
-    childrenContext,
     component,
+    state,
     useBlock
   ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
@@ -638,12 +611,12 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
               return /* @__PURE__ */ _jsxC(RenderBlock, {
                 block: child,
                 get context() {
-                  return childrenContext.value;
+                  return state.childrenContext;
                 },
                 [_IMMUTABLE]: {
-                  context: _fnSignal((p0) => p0.value, [
-                    childrenContext
-                  ], "p0.value")
+                  context: _fnSignal((p0) => p0.childrenContext, [
+                    state
+                  ], "p0.childrenContext")
                 }
               }, 3, "render-block-" + child.id);
             }),
@@ -651,12 +624,12 @@ const RenderBlock = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
               return /* @__PURE__ */ _jsxC(BlockStyles, {
                 block: child,
                 get context() {
-                  return childrenContext.value;
+                  return state.childrenContext;
                 },
                 [_IMMUTABLE]: {
-                  context: _fnSignal((p0) => p0.value, [
-                    childrenContext
-                  ], "p0.value")
+                  context: _fnSignal((p0) => p0.childrenContext, [
+                    state
+                  ], "p0.childrenContext")
                 }
               }, 3, "block-style-" + child.id);
             })
@@ -714,6 +687,14 @@ const RenderBlocks = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
       builderContext,
       props,
       state
+    ]),
+    onKeyPress$: /* @__PURE__ */ inlinedQrl((event) => {
+      const [builderContext2, props2, state2] = useLexicalScope();
+      return onClick$1(props2);
+    }, "RenderBlocks_component_div_onKeyPress_N5bJZwtuEmI", [
+      builderContext,
+      props,
+      state
     ])
   }, {
     class: _fnSignal((p0) => p0.value + " div-RenderBlocks", [
@@ -1948,7 +1929,9 @@ const componentInfo$1 = {
         "jpeg",
         "jpg",
         "png",
-        "svg"
+        "svg",
+        "gif",
+        "webp"
       ],
       required: true
     }
@@ -2669,7 +2652,7 @@ const getInteractionPropertiesForEvent = (event) => {
     }
   };
 };
-const SDK_VERSION = "0.4.1";
+const SDK_VERSION = "0.4.2";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];
@@ -3026,31 +3009,31 @@ const getContentInitialValue = ({ content, data }) => {
   };
 };
 const mergeNewContent = function mergeNewContent2(props, state, elementRef, newContent) {
-  state.useContent = {
-    ...state.useContent,
+  state.builderContextSignal.content = {
+    ...state.builderContextSignal.content,
     ...newContent,
     data: {
-      ...state.useContent?.data,
+      ...state.builderContextSignal.content?.data,
       ...newContent?.data
     },
     meta: {
-      ...state.useContent?.meta,
+      ...state.builderContextSignal.content?.meta,
       ...newContent?.meta,
-      breakpoints: newContent?.meta?.breakpoints || state.useContent?.meta?.breakpoints
+      breakpoints: newContent?.meta?.breakpoints || state.builderContextSignal.content?.meta?.breakpoints
     }
   };
 };
 const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakpoints) {
-  state.useContent = {
-    ...state.useContent,
+  state.builderContextSignal.content = {
+    ...state.builderContextSignal.content,
     meta: {
-      ...state.useContent?.meta,
+      ...state.builderContextSignal.content?.meta,
       breakpoints
     }
   };
 };
 const contentSetState = function contentSetState2(props, state, elementRef, newRootState) {
-  state.contentState = newRootState;
+  state.builderContextSignal.rootState = newRootState;
 };
 const processMessage = function processMessage2(props, state, elementRef, event) {
   const { data } = event;
@@ -3059,7 +3042,7 @@ const processMessage = function processMessage2(props, state, elementRef, event)
       case "builder.configureSdk": {
         const messageContent = data.data;
         const { breakpoints, contentId } = messageContent;
-        if (!contentId || contentId !== state.useContent?.id)
+        if (!contentId || contentId !== state.builderContextSignal.content?.id)
           return;
         if (breakpoints)
           setBreakpoints(props, state, elementRef, breakpoints);
@@ -3079,20 +3062,20 @@ const processMessage = function processMessage2(props, state, elementRef, event)
     }
 };
 const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
-  const jsCode = state.useContent?.data?.jsCode;
+  const jsCode = state.builderContextSignal.content?.data?.jsCode;
   if (jsCode)
     evaluate({
       code: jsCode,
       context: props.context || {},
       localState: void 0,
-      rootState: state.contentState,
+      rootState: state.builderContextSignal.rootState,
       rootSetState: contentSetState.bind(null, props, state, elementRef)
     });
 };
 const onClick = function onClick22(props, state, elementRef, event) {
-  if (state.useContent) {
-    const variationId = state.useContent?.testVariationId;
-    const contentId = state.useContent?.id;
+  if (state.builderContextSignal.content) {
+    const variationId = state.builderContextSignal.content?.testVariationId;
+    const contentId = state.builderContextSignal.content?.id;
     _track({
       type: "click",
       canTrack: state.canTrackToUse,
@@ -3111,14 +3094,14 @@ const evalExpression = function evalExpression2(props, state, elementRef, expres
     code: group,
     context: props.context || {},
     localState: void 0,
-    rootState: state.contentState,
+    rootState: state.builderContextSignal.rootState,
     rootSetState: contentSetState.bind(null, props, state, elementRef)
   }));
 };
 const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
   fetch$1(url).then((response) => response.json()).then((json) => {
     const newState = {
-      ...state.contentState,
+      ...state.builderContextSignal.rootState,
       [key]: json
     };
     contentSetState(props, state, elementRef, newState);
@@ -3127,7 +3110,7 @@ const handleRequest = function handleRequest2(props, state, elementRef, { url, k
   });
 };
 const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
-  const requests = state.useContent?.data?.httpRequests ?? {};
+  const requests = state.builderContextSignal.content?.data?.httpRequests ?? {};
   Object.entries(requests).forEach(([key, url]) => {
     if (url && (!state.httpReqsData[key] || isEditing())) {
       const evaluatedUrl = evalExpression(props, state, elementRef, url);
@@ -3142,7 +3125,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
   if (isEditing())
     window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
       detail: {
-        state: state.contentState,
+        state: state.builderContextSignal.rootState,
         ref: {
           name: props.model
         }
@@ -3153,24 +3136,36 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   _jsxBranch();
   const elementRef = useSignal();
   const state = useStore({
-    allRegisteredComponents: [
-      ...getDefaultRegisteredComponents(),
-      ...components,
-      ...props.customComponents || []
-    ].reduce((acc, { component, ...curr }) => ({
-      ...acc,
-      [curr.name]: {
-        component,
-        ...curr
-      }
-    }), {}),
+    builderContextSignal: {
+      content: getContentInitialValue({
+        content: props.content,
+        data: props.data
+      }),
+      localState: void 0,
+      rootState: getContextStateInitialValue({
+        content: props.content,
+        data: props.data,
+        locale: props.locale
+      }),
+      rootSetState: void 0,
+      context: props.context || {},
+      apiKey: props.apiKey,
+      apiVersion: props.apiVersion,
+      registeredComponents: [
+        ...getDefaultRegisteredComponents(),
+        ...components,
+        ...props.customComponents || []
+      ].reduce((acc, { component, ...curr }) => ({
+        ...acc,
+        [curr.name]: {
+          component,
+          ...curr
+        }
+      }), {}),
+      inheritedStyles: {}
+    },
     canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
     clicked: false,
-    contentState: getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale
-    }),
     forceReRenderCount: 0,
     httpReqsData: {},
     overrideContent: null,
@@ -3178,25 +3173,11 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
       contentId: props.content?.id,
       parentContentId: props.parentContentId
     }),
-    update: 0,
-    useContent: getContentInitialValue({
-      content: props.content,
-      data: props.data
-    })
+    update: 0
   }, {
     deep: true
   });
-  useContextProvider(BuilderContext, useStore({
-    content: state.useContent,
-    localState: void 0,
-    rootState: state.contentState,
-    rootSetState: void 0,
-    context: props.context || {},
-    apiKey: props.apiKey,
-    apiVersion: props.apiVersion,
-    registeredComponents: state.allRegisteredComponents,
-    inheritedStyles: {}
-  }));
+  useContextProvider(BuilderContext, state.builderContextSignal);
   useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
     const [elementRef2, props2, state2] = useLexicalScope();
     if (!props2.apiKey)
@@ -3216,16 +3197,16 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
             enrich: props2.enrich
           } : {}
         });
-        Object.values(state2.allRegisteredComponents).forEach((registeredComponent) => {
+        Object.values(state2.builderContextSignal.registeredComponents).forEach((registeredComponent) => {
           const message = createRegisterComponentMessage(registeredComponent);
           window.parent?.postMessage(message, "*");
         });
         window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
       }
-      if (state2.useContent) {
-        const variationId = state2.useContent?.testVariationId;
-        const contentId = state2.useContent?.id;
+      if (state2.builderContextSignal.content) {
+        const variationId = state2.builderContextSignal.content?.testVariationId;
+        const contentId = state2.builderContextSignal.content?.id;
         _track({
           type: "impression",
           canTrack: state2.canTrackToUse,
@@ -3270,8 +3251,8 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
-    track2(() => state2.useContent?.data?.jsCode);
-    track2(() => state2.contentState);
+    track2(() => state2.builderContextSignal.content?.data?.jsCode);
+    track2(() => state2.builderContextSignal.rootState);
     evaluateJsCode(props2, state2, elementRef2);
   }, "RenderContent_component_useTask_1_X59YMGOetns", [
     elementRef,
@@ -3280,7 +3261,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
-    track2(() => state2.useContent?.data?.httpRequests);
+    track2(() => state2.builderContextSignal.content?.data?.httpRequests);
     runHttpRequests(props2, state2, elementRef2);
   }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
     elementRef,
@@ -3289,7 +3270,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
   ]));
   useTaskQrl(/* @__PURE__ */ inlinedQrl(({ track: track2 }) => {
     const [elementRef2, props2, state2] = useLexicalScope();
-    track2(() => state2.contentState);
+    track2(() => state2.builderContextSignal.rootState);
     emitStateUpdate(props2, state2);
   }, "RenderContent_component_useTask_3_xLCHvjhJYRM", [
     elementRef,
@@ -3297,7 +3278,7 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
     state
   ]));
   return /* @__PURE__ */ _jsxC(Fragment, {
-    children: state.useContent ? /* @__PURE__ */ _jsxS("div", {
+    children: state.builderContextSignal.content ? /* @__PURE__ */ _jsxS("div", {
       ref: elementRef,
       ...{},
       ...props.hideContent ? {
@@ -3312,34 +3293,34 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
         }, null, 3, "03_0") : null,
         /* @__PURE__ */ _jsxC(RenderContentStyles, {
           get contentId() {
-            return state.useContent?.id;
+            return state.builderContextSignal.content?.id;
           },
           get cssCode() {
-            return state.useContent?.data?.cssCode;
+            return state.builderContextSignal.content?.data?.cssCode;
           },
           get customFonts() {
-            return state.useContent?.data?.customFonts;
+            return state.builderContextSignal.content?.data?.customFonts;
           },
           [_IMMUTABLE]: {
-            contentId: _fnSignal((p0) => p0.useContent?.id, [
+            contentId: _fnSignal((p0) => p0.builderContextSignal.content?.id, [
               state
-            ], "p0.useContent?.id"),
-            cssCode: _fnSignal((p0) => p0.useContent?.data?.cssCode, [
+            ], "p0.builderContextSignal.content?.id"),
+            cssCode: _fnSignal((p0) => p0.builderContextSignal.content?.data?.cssCode, [
               state
-            ], "p0.useContent?.data?.cssCode"),
-            customFonts: _fnSignal((p0) => p0.useContent?.data?.customFonts, [
+            ], "p0.builderContextSignal.content?.data?.cssCode"),
+            customFonts: _fnSignal((p0) => p0.builderContextSignal.content?.data?.customFonts, [
               state
-            ], "p0.useContent?.data?.customFonts")
+            ], "p0.builderContextSignal.content?.data?.customFonts")
           }
         }, 3, "03_1"),
         /* @__PURE__ */ _jsxC(RenderBlocks, {
           get blocks() {
-            return state.useContent?.data?.blocks;
+            return state.builderContextSignal.content?.data?.blocks;
           },
           [_IMMUTABLE]: {
-            blocks: _fnSignal((p0) => p0.useContent?.data?.blocks, [
+            blocks: _fnSignal((p0) => p0.builderContextSignal.content?.data?.blocks, [
               state
-            ], "p0.useContent?.data?.blocks")
+            ], "p0.builderContextSignal.content?.data?.blocks")
           }
         }, 3, state.forceReRenderCount)
       ],
@@ -3352,9 +3333,9 @@ const RenderContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((p
         state
       ])
     }, {
-      "builder-content-id": _fnSignal((p0) => p0.useContent?.id, [
+      "builder-content-id": _fnSignal((p0) => p0.builderContextSignal.content?.id, [
         state
-      ], "p0.useContent?.id"),
+      ], "p0.builderContextSignal.content?.id"),
       "builder-model": _fnSignal((p0) => p0.model, [
         props
       ], "p0.model"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.1";
+export declare const SDK_VERSION = "0.4.2";