@builder.io/sdk-qwik 0.0.36 → 0.0.37

package/lib/index.qwik.cjs

@@ -68,7 +68,7 @@ const registerInsertMenu = ()=>{
     });
 };
 let isSetupForEditing = false;
-const setupBrowserForEditing = ()=>{
+const setupBrowserForEditing = (options = {})=>{
     if (isSetupForEditing) return;
     isSetupForEditing = true;
     if (isBrowser()) {
@@ -86,6 +86,12 @@ const setupBrowserForEditing = ()=>{
                 supportsCustomBreakpoints: true
             }
         }, '*');
+        window.parent?.postMessage({
+            type: 'builder.updateContent',
+            data: {
+                options
+            }
+        }, '*');
         window.addEventListener('message', ({ data  })=>{
             if (!data?.type) return;
             switch(data.type){
@@ -190,7 +196,7 @@ const getSizesForBreakpoints = ({ small , medium  })=>{
     return newSizes;
 };
 
-function evaluate({ code , context , state , event  }) {
+function evaluate({ code , context , state , event , isExpression =true  }) {
     if (code === '') {
         console.warn('Skipping evaluation of empty code block.');
         return;
@@ -202,12 +208,13 @@ function evaluate({ code , context , state , event  }) {
     };
     // Be able to handle simple expressions like "state.foo" or "1 + 1"
     // as well as full blocks like "var foo = "bar"; return foo"
-    const useReturn = !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
+    const useReturn = // we disable this for cases where we definitely don't want a return
+    isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
     const useCode = useReturn ? `return (${code});` : code;
     try {
         return new Function('builder', 'Builder' /* <- legacy */ , 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
     } catch (e) {
-        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e.message || e);
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
     }
 }
 
@@ -347,7 +354,7 @@ function capitalizeFirstLetter(string) {
 }
 const getEventHandlerName = (key)=>`on${capitalizeFirstLetter(key)}$`;
 
-function crateEventHandler(value, options) {
+function createEventHandler(value, options) {
     return qwik.inlinedQrl((event)=>{
         const [options, value] = qwik.useLexicalScope();
         return evaluate({
@@ -356,7 +363,7 @@ function crateEventHandler(value, options) {
             state: options.state,
             event
         });
-    }, "crateEventHandler_wgxT8Hlq4s8", [
+    }, "createEventHandler_7wCAiJVliNE", [
         options,
         value
     ]);
@@ -369,33 +376,11 @@ function getBlockActions(options) {
         // eslint-disable-next-line no-prototype-builtins
         if (!optionActions.hasOwnProperty(key)) continue;
         const value = optionActions[key];
-        obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+        obj[getEventHandlerName(key)] = createEventHandler(value, options);
     }
     return obj;
 }
 
-function getBlockBindings(state, block) {
-    const props = {};
-    const bindings = block.bindings;
-    if (bindings) for(const key in bindings){
-        if (key.startsWith('component.')) ;
-        else if (key.startsWith('style.')) {
-            const styleKey = key.substring(6);
-            const style = props.style || (props.style = {});
-            style[styleKey] = evaluate({
-                code: bindings[key],
-                state,
-                context: {}
-            });
-        } else props[key] = evaluate({
-            code: bindings[key],
-            state,
-            context: {}
-        });
-    }
-    return props;
-}
-
 function getBlockComponentOptions(block) {
     return {
         ...block.component?.options,
@@ -599,15 +584,16 @@ const useBlock = function useBlock(props, state) {
         shouldEvaluateBindings: true
     });
 };
+const actions = function actions(props, state) {
+    return getBlockActions({
+        block: useBlock(props),
+        state: props.context.state,
+        context: props.context.context
+    });
+};
 const attributes = function attributes(props, state) {
     return {
         ...getBlockProperties(useBlock(props)),
-        ...getBlockBindings(props.context.state, useBlock(props)),
-        ...getBlockActions({
-            block: useBlock(props),
-            state: props.context.state,
-            context: props.context.context
-        }),
         ...{}
     };
 };
@@ -624,7 +610,10 @@ const renderComponentProps = function renderComponentProps(props, state) {
        * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
        * they are provided to the component itself directly.
        */ ...shouldWrap(props) ? {} : {
-                attributes: attributes(props)
+                attributes: {
+                    ...attributes(props),
+                    ...actions(props)
+                }
             }
         },
         context: childrenContext(props)
@@ -700,7 +689,8 @@ const RenderBlock = (props)=>{
         children: shouldWrap(props) ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [
                 isEmptyHtmlElement(tag(props)) ? /*#__PURE__*/ jsxRuntime.jsx(state.tag, {
-                    ...attributes(props)
+                    ...attributes(props),
+                    ...actions(props)
                 }) : null,
                 !isEmptyHtmlElement(tag(props)) && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
                     return /*#__PURE__*/ jsxRuntime.jsx(RenderRepeatedBlock$1, {
@@ -718,6 +708,7 @@ const RenderBlock = (props)=>{
                 }) : null,
                 !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /*#__PURE__*/ jsxRuntime.jsxs(state.tag, {
                     ...attributes(props),
+                    ...actions(props),
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(state.renderComponentTag, {
                             ...renderComponentProps(props)
@@ -981,6 +972,17 @@ const webpSrcSet = function webpSrcSet(props, state) {
     if (srcSetToUse(props)?.match(/builder\.io/) && !props.noWebp) return srcSetToUse(props).replace(/\?/g, "?format=webp&");
     else return "";
 };
+const aspectRatioCss = function aspectRatioCss(props, state) {
+    const aspectRatioStyles = {
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: "0px",
+        top: "0px"
+    };
+    const out = props.aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+};
 const Image = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
     return /*#__PURE__*/ jsxRuntime.jsxs(qwik.Fragment, {
@@ -998,8 +1000,9 @@ const Image = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
                         },
                         role: props.altText ? "presentation" : undefined,
                         style: {
-                            objectPosition: props.backgroundSize || "center",
-                            objectFit: props.backgroundSize || "cover"
+                            objectPosition: props.backgroundPosition || "center",
+                            objectFit: props.backgroundSize || "cover",
+                            ...aspectRatioCss(props)
                         },
                         class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
                         get src () {
@@ -1023,8 +1026,8 @@ const Image = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
             props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent) ? /*#__PURE__*/ jsxRuntime.jsx("div", {
                 class: "builder-image-sizer div-Image",
                 style: {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    paddingTop: props.aspectRatio * 100 + "%"
+                    paddingTop: // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    props.aspectRatio * 100 + "%"
                 }
             }) : null,
             props.builderBlock?.children?.length && props.fitContent ? /*#__PURE__*/ jsxRuntime.jsx(qwik.Slot, {}) : null,
@@ -1038,12 +1041,7 @@ const Image = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
 const Image$1 = Image;
 const STYLES$1 = `.img-Image { 
 opacity: 1;
-transition: opacity 0.2s ease-in-out;
-position: absolute;
-height: 100%;
-width: 100%;
-top: 0px;
-left: 0px; }.div-Image { 
+transition: opacity 0.2s ease-in-out; }.div-Image { 
 width: 100%;
 pointer-events: none;
 font-size: 0; }.div-Image-2 { 
@@ -1656,18 +1654,9 @@ const componentInfo$6 = {
 const SectionComponent = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     return /*#__PURE__*/ jsxRuntime.jsx("section", {
         ...props.attributes,
-        style: {
-            width: "100%",
-            alignSelf: "stretch",
-            flexGrow: "1",
-            boxSizing: "border-box",
-            maxWidth: `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            marginLeft: "auto",
-            marginRight: "auto"
-        },
+        style: (()=>{
+            props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : undefined;
+        })(),
         children: /*#__PURE__*/ jsxRuntime.jsx(qwik.Slot, {})
     });
 }, "SectionComponent_component_ZWF9iD5WeLg"));
@@ -2154,6 +2143,7 @@ const componentInfo = {
 }
 
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
 const convertSearchParamsToQueryObject = (searchParams)=>{
     const options = {};
     searchParams.forEach((value, key)=>{
@@ -2167,7 +2157,7 @@ const getBuilderSearchParams = (_options)=>{
     const newOptions = {};
     Object.keys(options).forEach((key)=>{
         if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
             newOptions[trimmedKey] = options[key];
         }
     });
@@ -2368,9 +2358,9 @@ async function getContent(options) {
     })).results[0] || null;
 }
 const generateContentUrl = (options)=>{
-    const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true ,  } = options;
+    const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true , locale ,  } = options;
     if (!apiKey) throw new Error('Missing API key');
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
+    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {})
@@ -2391,7 +2381,8 @@ async function getAllContent(options) {
     const fetch = await getFetch();
     const content = await fetch(url.href).then((res)=>res.json());
     const canTrack = options.canTrack !== false;
-    if (canTrack) for (const item of content.results)await handleABTesting({
+    if (canTrack && // This makes sure we have a non-error response with the results array.
+    Array.isArray(content.results)) for (const item of content.results)await handleABTesting({
         item,
         canTrack
     });
@@ -2535,6 +2526,10 @@ const createEvent = async ({ type: eventType , canTrack , apiKey , metadata , ..
         }
     });
 async function _track(eventProps) {
+    if (!eventProps.apiKey) {
+        console.error('[Builder.io]: Missing API key for track call. Please provide your API key.');
+        return;
+    }
     if (!eventProps.canTrack) return;
     if (isEditing()) return;
     if (!(isBrowser() || TARGET === 'reactNative')) return;
@@ -2576,7 +2571,7 @@ const getCssFromFont = function getCssFromFont(props, state, font) {
     if (font.files) for(const weight in font.files){
         const isNumber = String(Number(weight)) === weight;
         if (!isNumber) continue;
-         // TODO: maybe limit number loaded
+        // TODO: maybe limit number loaded
         const weightUrl = font.files[weight];
         if (weightUrl && weightUrl !== url) str += `
   @font-face {
@@ -2633,6 +2628,9 @@ const contentState = function contentState(props, state, elementRef) {
     return {
         ...props.content?.data?.state,
         ...props.data,
+        ...props.locale ? {
+            locale: props.locale
+        } : {},
         ...state.overrideState
     };
 };
@@ -2642,6 +2640,7 @@ const contextContext = function contextContext(props, state, elementRef) {
 const allRegisteredComponents = function allRegisteredComponents(props, state, elementRef) {
     const allComponentsArray = [
         ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
         // Since users are able to override our default components, we need to make sure that we do not break such
         // existing usage.
         // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
@@ -2766,11 +2765,19 @@ const RenderContent = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     }));
     qwik.useClientEffectQrl(qwik.inlinedQrl(()=>{
         const [elementRef, props, state] = qwik.useLexicalScope();
+        if (!props.apiKey) console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
         if (isBrowser()) {
             if (isEditing()) {
                 state.forceReRenderCount = state.forceReRenderCount + 1;
                 registerInsertMenu();
-                setupBrowserForEditing();
+                setupBrowserForEditing({
+                    ...props.locale ? {
+                        locale: props.locale
+                    } : {},
+                    ...props.includeRefs ? {
+                        includeRefs: props.includeRefs
+                    } : {}
+                });
                 Object.values(allRegisteredComponents(props)).forEach((registeredComponent)=>{
                     const message = createRegisterComponentMessage(registeredComponent);
                     window.parent?.postMessage(message, "*");
@@ -2788,7 +2795,8 @@ const RenderContent = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
                     apiKey: props.apiKey,
                     variationId: variationId !== contentId ? variationId : undefined
                 });
-            } // override normal content in preview mode
+            }
+            // override normal content in preview mode
             if (isPreviewing()) {
                 const searchParams = new URL(location.href).searchParams;
                 if (props.model && searchParams.get("builder.preview") === props.model) {
@@ -2813,6 +2821,7 @@ const RenderContent = /*#__PURE__*/ qwik.componentQrl(qwik.inlinedQrl((props)=>{
     qwik.useWatchQrl(qwik.inlinedQrl(({ track  })=>{
         const [elementRef, props, state] = qwik.useLexicalScope();
         state.useContent?.data && track(state.useContent?.data, "jsCode");
+        state && track(state, "contentState");
         evaluateJsCode(props, state);
     }, "RenderContent_component_useWatch_OIBatobA0hE", [
         elementRef,

package/lib/index.qwik.mjs

@@ -64,7 +64,7 @@ const registerInsertMenu = ()=>{
     });
 };
 let isSetupForEditing = false;
-const setupBrowserForEditing = ()=>{
+const setupBrowserForEditing = (options = {})=>{
     if (isSetupForEditing) return;
     isSetupForEditing = true;
     if (isBrowser()) {
@@ -82,6 +82,12 @@ const setupBrowserForEditing = ()=>{
                 supportsCustomBreakpoints: true
             }
         }, '*');
+        window.parent?.postMessage({
+            type: 'builder.updateContent',
+            data: {
+                options
+            }
+        }, '*');
         window.addEventListener('message', ({ data  })=>{
             if (!data?.type) return;
             switch(data.type){
@@ -186,7 +192,7 @@ const getSizesForBreakpoints = ({ small , medium  })=>{
     return newSizes;
 };
 
-function evaluate({ code , context , state , event  }) {
+function evaluate({ code , context , state , event , isExpression =true  }) {
     if (code === '') {
         console.warn('Skipping evaluation of empty code block.');
         return;
@@ -198,12 +204,13 @@ function evaluate({ code , context , state , event  }) {
     };
     // Be able to handle simple expressions like "state.foo" or "1 + 1"
     // as well as full blocks like "var foo = "bar"; return foo"
-    const useReturn = !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
+    const useReturn = // we disable this for cases where we definitely don't want a return
+    isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
     const useCode = useReturn ? `return (${code});` : code;
     try {
         return new Function('builder', 'Builder' /* <- legacy */ , 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
     } catch (e) {
-        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e.message || e);
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
     }
 }
 
@@ -343,7 +350,7 @@ function capitalizeFirstLetter(string) {
 }
 const getEventHandlerName = (key)=>`on${capitalizeFirstLetter(key)}$`;
 
-function crateEventHandler(value, options) {
+function createEventHandler(value, options) {
     return inlinedQrl((event)=>{
         const [options, value] = useLexicalScope();
         return evaluate({
@@ -352,7 +359,7 @@ function crateEventHandler(value, options) {
             state: options.state,
             event
         });
-    }, "crateEventHandler_wgxT8Hlq4s8", [
+    }, "createEventHandler_7wCAiJVliNE", [
         options,
         value
     ]);
@@ -365,33 +372,11 @@ function getBlockActions(options) {
         // eslint-disable-next-line no-prototype-builtins
         if (!optionActions.hasOwnProperty(key)) continue;
         const value = optionActions[key];
-        obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+        obj[getEventHandlerName(key)] = createEventHandler(value, options);
     }
     return obj;
 }
 
-function getBlockBindings(state, block) {
-    const props = {};
-    const bindings = block.bindings;
-    if (bindings) for(const key in bindings){
-        if (key.startsWith('component.')) ;
-        else if (key.startsWith('style.')) {
-            const styleKey = key.substring(6);
-            const style = props.style || (props.style = {});
-            style[styleKey] = evaluate({
-                code: bindings[key],
-                state,
-                context: {}
-            });
-        } else props[key] = evaluate({
-            code: bindings[key],
-            state,
-            context: {}
-        });
-    }
-    return props;
-}
-
 function getBlockComponentOptions(block) {
     return {
         ...block.component?.options,
@@ -595,15 +580,16 @@ const useBlock = function useBlock(props, state) {
         shouldEvaluateBindings: true
     });
 };
+const actions = function actions(props, state) {
+    return getBlockActions({
+        block: useBlock(props),
+        state: props.context.state,
+        context: props.context.context
+    });
+};
 const attributes = function attributes(props, state) {
     return {
         ...getBlockProperties(useBlock(props)),
-        ...getBlockBindings(props.context.state, useBlock(props)),
-        ...getBlockActions({
-            block: useBlock(props),
-            state: props.context.state,
-            context: props.context.context
-        }),
         ...{}
     };
 };
@@ -620,7 +606,10 @@ const renderComponentProps = function renderComponentProps(props, state) {
        * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
        * they are provided to the component itself directly.
        */ ...shouldWrap(props) ? {} : {
-                attributes: attributes(props)
+                attributes: {
+                    ...attributes(props),
+                    ...actions(props)
+                }
             }
         },
         context: childrenContext(props)
@@ -696,7 +685,8 @@ const RenderBlock = (props)=>{
         children: shouldWrap(props) ? /*#__PURE__*/ jsxs(Fragment$1, {
             children: [
                 isEmptyHtmlElement(tag(props)) ? /*#__PURE__*/ jsx(state.tag, {
-                    ...attributes(props)
+                    ...attributes(props),
+                    ...actions(props)
                 }) : null,
                 !isEmptyHtmlElement(tag(props)) && repeatItemData(props) ? (repeatItemData(props) || []).map(function(data, index) {
                     return /*#__PURE__*/ jsx(RenderRepeatedBlock$1, {
@@ -714,6 +704,7 @@ const RenderBlock = (props)=>{
                 }) : null,
                 !isEmptyHtmlElement(tag(props)) && !repeatItemData(props) ? /*#__PURE__*/ jsxs(state.tag, {
                     ...attributes(props),
+                    ...actions(props),
                     children: [
                         /*#__PURE__*/ jsx(state.renderComponentTag, {
                             ...renderComponentProps(props)
@@ -977,6 +968,17 @@ const webpSrcSet = function webpSrcSet(props, state) {
     if (srcSetToUse(props)?.match(/builder\.io/) && !props.noWebp) return srcSetToUse(props).replace(/\?/g, "?format=webp&");
     else return "";
 };
+const aspectRatioCss = function aspectRatioCss(props, state) {
+    const aspectRatioStyles = {
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: "0px",
+        top: "0px"
+    };
+    const out = props.aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+};
 const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     useStylesScopedQrl(inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
     return /*#__PURE__*/ jsxs(Fragment$2, {
@@ -994,8 +996,9 @@ const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
                         },
                         role: props.altText ? "presentation" : undefined,
                         style: {
-                            objectPosition: props.backgroundSize || "center",
-                            objectFit: props.backgroundSize || "cover"
+                            objectPosition: props.backgroundPosition || "center",
+                            objectFit: props.backgroundSize || "cover",
+                            ...aspectRatioCss(props)
                         },
                         class: "builder-image" + (props.className ? " " + props.className : "") + " img-Image",
                         get src () {
@@ -1019,8 +1022,8 @@ const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
             props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent) ? /*#__PURE__*/ jsx("div", {
                 class: "builder-image-sizer div-Image",
                 style: {
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    paddingTop: props.aspectRatio * 100 + "%"
+                    paddingTop: // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    props.aspectRatio * 100 + "%"
                 }
             }) : null,
             props.builderBlock?.children?.length && props.fitContent ? /*#__PURE__*/ jsx(Slot, {}) : null,
@@ -1034,12 +1037,7 @@ const Image = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
 const Image$1 = Image;
 const STYLES$1 = `.img-Image { 
 opacity: 1;
-transition: opacity 0.2s ease-in-out;
-position: absolute;
-height: 100%;
-width: 100%;
-top: 0px;
-left: 0px; }.div-Image { 
+transition: opacity 0.2s ease-in-out; }.div-Image { 
 width: 100%;
 pointer-events: none;
 font-size: 0; }.div-Image-2 { 
@@ -1652,18 +1650,9 @@ const componentInfo$6 = {
 const SectionComponent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     return /*#__PURE__*/ jsx("section", {
         ...props.attributes,
-        style: {
-            width: "100%",
-            alignSelf: "stretch",
-            flexGrow: "1",
-            boxSizing: "border-box",
-            maxWidth: `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            marginLeft: "auto",
-            marginRight: "auto"
-        },
+        style: (()=>{
+            props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : undefined;
+        })(),
         children: /*#__PURE__*/ jsx(Slot, {})
     });
 }, "SectionComponent_component_ZWF9iD5WeLg"));
@@ -2150,6 +2139,7 @@ const componentInfo = {
 }
 
 const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
 const convertSearchParamsToQueryObject = (searchParams)=>{
     const options = {};
     searchParams.forEach((value, key)=>{
@@ -2163,7 +2153,7 @@ const getBuilderSearchParams = (_options)=>{
     const newOptions = {};
     Object.keys(options).forEach((key)=>{
         if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '');
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
             newOptions[trimmedKey] = options[key];
         }
     });
@@ -2364,9 +2354,9 @@ async function getContent(options) {
     })).results[0] || null;
 }
 const generateContentUrl = (options)=>{
-    const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true ,  } = options;
+    const { limit =30 , userAttributes , query , noTraverse =false , model , apiKey , includeRefs =true , locale ,  } = options;
     if (!apiKey) throw new Error('Missing API key');
-    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
+    const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
     const queryOptions = {
         ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {})
@@ -2387,7 +2377,8 @@ async function getAllContent(options) {
     const fetch = await getFetch();
     const content = await fetch(url.href).then((res)=>res.json());
     const canTrack = options.canTrack !== false;
-    if (canTrack) for (const item of content.results)await handleABTesting({
+    if (canTrack && // This makes sure we have a non-error response with the results array.
+    Array.isArray(content.results)) for (const item of content.results)await handleABTesting({
         item,
         canTrack
     });
@@ -2531,6 +2522,10 @@ const createEvent = async ({ type: eventType , canTrack , apiKey , metadata , ..
         }
     });
 async function _track(eventProps) {
+    if (!eventProps.apiKey) {
+        console.error('[Builder.io]: Missing API key for track call. Please provide your API key.');
+        return;
+    }
     if (!eventProps.canTrack) return;
     if (isEditing()) return;
     if (!(isBrowser() || TARGET === 'reactNative')) return;
@@ -2572,7 +2567,7 @@ const getCssFromFont = function getCssFromFont(props, state, font) {
     if (font.files) for(const weight in font.files){
         const isNumber = String(Number(weight)) === weight;
         if (!isNumber) continue;
-         // TODO: maybe limit number loaded
+        // TODO: maybe limit number loaded
         const weightUrl = font.files[weight];
         if (weightUrl && weightUrl !== url) str += `
   @font-face {
@@ -2629,6 +2624,9 @@ const contentState = function contentState(props, state, elementRef) {
     return {
         ...props.content?.data?.state,
         ...props.data,
+        ...props.locale ? {
+            locale: props.locale
+        } : {},
         ...state.overrideState
     };
 };
@@ -2638,6 +2636,7 @@ const contextContext = function contextContext(props, state, elementRef) {
 const allRegisteredComponents = function allRegisteredComponents(props, state, elementRef) {
     const allComponentsArray = [
         ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
         // Since users are able to override our default components, we need to make sure that we do not break such
         // existing usage.
         // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
@@ -2762,11 +2761,19 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     }));
     useClientEffectQrl(inlinedQrl(()=>{
         const [elementRef, props, state] = useLexicalScope();
+        if (!props.apiKey) console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
         if (isBrowser()) {
             if (isEditing()) {
                 state.forceReRenderCount = state.forceReRenderCount + 1;
                 registerInsertMenu();
-                setupBrowserForEditing();
+                setupBrowserForEditing({
+                    ...props.locale ? {
+                        locale: props.locale
+                    } : {},
+                    ...props.includeRefs ? {
+                        includeRefs: props.includeRefs
+                    } : {}
+                });
                 Object.values(allRegisteredComponents(props)).forEach((registeredComponent)=>{
                     const message = createRegisterComponentMessage(registeredComponent);
                     window.parent?.postMessage(message, "*");
@@ -2784,7 +2791,8 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
                     apiKey: props.apiKey,
                     variationId: variationId !== contentId ? variationId : undefined
                 });
-            } // override normal content in preview mode
+            }
+            // override normal content in preview mode
             if (isPreviewing()) {
                 const searchParams = new URL(location.href).searchParams;
                 if (props.model && searchParams.get("builder.preview") === props.model) {
@@ -2809,6 +2817,7 @@ const RenderContent = /*#__PURE__*/ componentQrl(inlinedQrl((props)=>{
     useWatchQrl(inlinedQrl(({ track  })=>{
         const [elementRef, props, state] = useLexicalScope();
         state.useContent?.data && track(state.useContent?.data, "jsCode");
+        state && track(state, "contentState");
         evaluateJsCode(props, state);
     }, "RenderContent_component_useWatch_OIBatobA0hE", [
         elementRef,

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",
   "module": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
   "types": "./types/index.d.ts",
-  "files": [
-    "lib",
-    "types"
-  ],
   "exports": {
     ".": {
       "import": "./lib/index.qwik.mjs",
@@ -20,8 +16,8 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "build": "tsc && vite build --mode lib",
-    "release:patch": "yarn run build && yarn version patch && npm publish --access public",
-    "release:dev": "yarn run build && npm version prerelease && npm publish --tag latest --access public"
+    "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
+    "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag latest --access public"
   },
   "devDependencies": {
     "@types/node": "latest",
@@ -29,6 +25,6 @@
     "vite": "^3.0.4"
   },
   "peerDependencies": {
-    "@builder.io/qwik": ">=0.13.3"
+    "@builder.io/qwik": ">=0.0.108"
   }
 }

package/types/blocks/image/image.d.ts

@@ -20,6 +20,13 @@ export interface ImageProps {
 }
 export declare const srcSetToUse: (props: any, state: any) => any;
 export declare const webpSrcSet: (props: any, state: any) => any;
+export declare const aspectRatioCss: (props: any, state: any) => {
+    position: string;
+    height: string;
+    width: string;
+    left: string;
+    top: string;
+} | undefined;
 export declare const Image: import("@builder.io/qwik").Component<ImageProps>;
 export default Image;
-export declare const STYLES = ".img-Image { \nopacity: 1;\ntransition: opacity 0.2s ease-in-out;\nposition: absolute;\nheight: 100%;\nwidth: 100%;\ntop: 0px;\nleft: 0px; }.div-Image { \nwidth: 100%;\npointer-events: none;\nfont-size: 0; }.div-Image-2 { \ndisplay: flex;\nflex-direction: column;\nalign-items: stretch;\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%; }";
+export declare const STYLES = ".img-Image { \nopacity: 1;\ntransition: opacity 0.2s ease-in-out; }.div-Image { \nwidth: 100%;\npointer-events: none;\nfont-size: 0; }.div-Image-2 { \ndisplay: flex;\nflex-direction: column;\nalign-items: stretch;\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%; }";

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

@@ -9,6 +9,9 @@ export declare type RenderBlockProps = {
 export declare const component: (props: any, state: any) => any;
 export declare const tag: (props: any, state: any) => string;
 export declare const useBlock: (props: any, state: any) => any;
+export declare const actions: (props: any, state: any) => {
+    [index: string]: (event: Event) => any;
+};
 export declare const attributes: (props: any, state: any) => {
     style?: CSSStyleDeclaration | Record<string, string | undefined> | undefined;
     'builder-id': string | undefined;

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

@@ -11,6 +11,8 @@ export declare type RenderContentProps = {
     apiKey: string;
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
+    locale?: string;
+    includeRefs?: boolean;
 };
 export declare const useContent: (props: any, state: any, elementRef: any) => BuilderContent | undefined;
 export declare const canTrackToUse: (props: any, state: any, elementRef: any) => any;

package/types/functions/evaluate.d.ts

@@ -1,5 +1,6 @@
 import type { BuilderContextInterface } from '../context/types.js';
-export declare function evaluate({ code, context, state, event, }: {
+export declare function evaluate({ code, context, state, event, isExpression, }: {
     code: string;
     event?: Event;
+    isExpression?: boolean;
 } & Pick<BuilderContextInterface, 'state' | 'context'>): any;

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

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

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

@@ -1,2 +1,6 @@
+import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getBlockStyles(block: BuilderBlock): Partial<CSSStyleDeclaration>;
+export declare function getBlockStyles({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}): Partial<CSSStyleDeclaration>;

package/types/functions/get-builder-search-params/index.d.ts

@@ -1,4 +1,4 @@
-declare type QueryObject = Record<string, string>;
+declare type QueryObject = Record<string, string | string[]>;
 export declare const convertSearchParamsToQueryObject: (searchParams: URLSearchParams) => QueryObject;
 export declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
 export declare const getBuilderSearchParamsFromWindow: () => QueryObject;

package/types/functions/get-content/index.d.ts

@@ -2,6 +2,9 @@ import type { BuilderContent } from '../../types/builder-content.js';
 export declare type GetContentOptions = import('./types.js').GetContentOptions;
 export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
 export declare const generateContentUrl: (options: GetContentOptions) => URL;
+/**
+ * TO-DO: Handle error responses.
+ */
 interface ContentResponse {
     results: BuilderContent[];
 }

package/types/functions/get-content/types.d.ts

@@ -32,4 +32,8 @@ export interface GetContentOptions {
      * Include references in the response. Defaults to `true`.
      */
     includeRefs?: boolean;
+    /**
+     * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
+     */
+    locale?: string;
 }

package/types/functions/mark-mutable.d.ts

@@ -1,2 +1,2 @@
-export declare function markMutable<T = any>(value: T): T;
-export declare function markPropsMutable<T = any>(props: T): T;
+export declare function markMutable<T>(value: T): T;
+export declare function markPropsMutable<T>(props: T): T;

package/types/functions/track.d.ts

@@ -1,6 +1,11 @@
 import type { CanTrack } from '../types/can-track.js';
 interface Event {
-    type: 'click' | 'impression';
+    /**
+     * The type of your event.
+     *
+     * Examples: `click`, `conversion`, `pageview`, `impression`
+     */
+    type: string;
     data: {
         /**
          * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.

package/types/scripts/init-editing.d.ts

@@ -1,2 +1,5 @@
 export declare const registerInsertMenu: () => void;
-export declare const setupBrowserForEditing: () => void;
+export declare const setupBrowserForEditing: (options?: {
+    includeRefs?: boolean;
+    locale?: string;
+}) => void;

package/types/talk/generators-updated.d.ts

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

package/types/talk/generators.d.ts

@@ -0,0 +1,6 @@
+declare const ON_MOUNT_CODE: "\n  Object.values(props.customComponents).forEach((registeredComponent) => {\n    sendComponentToVisualEditor(registeredComponent);\n  });\n";
+declare const REACT_CODE: string;
+declare const VUE_CODE: string;
+declare const SVELTE_CODE: string;
+declare const SOLIDJS_CODE: string;
+declare const QWIK_CODE: string;

package/types-hacks.d.ts

@@ -0,0 +1,13 @@
+type Dictionary<T> = Record<string, T>;
+type BuilderContent = any;
+type BuilderBlock = any;
+type RegisteredComponent = any;
+type RegisteredComponents = any;
+declare const builder: { env: 'dev'; apiKey: string };
+// TODO(misko): HACKS to be removed
+declare const get: (obj: any, key: string) => any;
+declare const set: (obj: any, key: string, value: any) => void;
+interface CSSProperties {
+  flexDirection: any;
+}
+declare const BuilderBlocks: (props: any) => any;

package/types/blocks/avatar/avatar.d.ts

@@ -1,267 +0,0 @@
-export declare const avatarService: any;
-export declare const Avatar: import("@builder.io/qwik").Component<any>;
-export default Avatar;
-export declare const COMPONENT: {
-    "@type": string;
-    children: {
-        "@type": string;
-        bindings: {
-            when: {
-                code: string;
-            };
-        };
-        children: ({
-            "@type": string;
-            bindings: {
-                class?: undefined;
-                title?: undefined;
-            };
-            children: never[];
-            meta: {};
-            name: string;
-            properties: {
-                _text: string;
-            };
-            scope: {};
-        } | {
-            "@type": string;
-            bindings: {
-                class: {
-                    code: string;
-                };
-                title: {
-                    code: string;
-                };
-            };
-            children: ({
-                "@type": string;
-                bindings: {
-                    when?: undefined;
-                };
-                children: never[];
-                meta: {};
-                name: string;
-                properties: {
-                    _text: string;
-                };
-                scope: {};
-            } | {
-                "@type": string;
-                bindings: {
-                    when: {
-                        code: string;
-                    };
-                };
-                children: ({
-                    "@type": string;
-                    bindings: {
-                        class?: undefined;
-                        style?: undefined;
-                    };
-                    children: never[];
-                    meta: {};
-                    name: string;
-                    properties: {
-                        _text: string;
-                    };
-                    scope: {};
-                } | {
-                    "@type": string;
-                    bindings: {
-                        class: {
-                            code: string;
-                        };
-                        style: {
-                            code: string;
-                        };
-                    };
-                    children: ({
-                        "@type": string;
-                        bindings: {
-                            when?: undefined;
-                        };
-                        children: never[];
-                        meta: {};
-                        name: string;
-                        properties: {
-                            _text: string;
-                        };
-                        scope: {};
-                    } | {
-                        "@type": string;
-                        bindings: {
-                            when: {
-                                code: string;
-                            };
-                        };
-                        children: ({
-                            "@type": string;
-                            bindings: {
-                                alt?: undefined;
-                                src?: undefined;
-                            };
-                            children: never[];
-                            meta: {};
-                            name: string;
-                            properties: {
-                                _text: string;
-                                class?: undefined;
-                            };
-                            scope: {};
-                        } | {
-                            "@type": string;
-                            bindings: {
-                                alt: {
-                                    code: string;
-                                };
-                                src: {
-                                    code: string;
-                                };
-                            };
-                            children: never[];
-                            meta: {};
-                            name: string;
-                            properties: {
-                                class: string;
-                                _text?: undefined;
-                            };
-                            scope: {};
-                        })[];
-                        meta: {};
-                        name: string;
-                        properties: {
-                            _text?: undefined;
-                        };
-                        scope: {};
-                    } | {
-                        "@type": string;
-                        bindings: {
-                            when: {
-                                code: string;
-                            };
-                        };
-                        children: ({
-                            "@type": string;
-                            bindings: {};
-                            children: never[];
-                            meta: {};
-                            name: string;
-                            properties: {
-                                _text: string;
-                            };
-                            scope: {};
-                        } | {
-                            "@type": string;
-                            bindings: {};
-                            children: {
-                                "@type": string;
-                                bindings: {
-                                    _text: {
-                                        code: string;
-                                    };
-                                };
-                                children: never[];
-                                meta: {};
-                                name: string;
-                                properties: {};
-                                scope: {};
-                            }[];
-                            meta: {};
-                            name: string;
-                            properties: {
-                                _text?: undefined;
-                            };
-                            scope: {};
-                        })[];
-                        meta: {};
-                        name: string;
-                        properties: {
-                            _text?: undefined;
-                        };
-                        scope: {};
-                    })[];
-                    meta: {};
-                    name: string;
-                    properties: {
-                        _text?: undefined;
-                    };
-                    scope: {};
-                })[];
-                meta: {};
-                name: string;
-                properties: {
-                    _text?: undefined;
-                };
-                scope: {};
-            })[];
-            meta: {};
-            name: string;
-            properties: {
-                _text?: undefined;
-            };
-            scope: {};
-        })[];
-        meta: {};
-        name: string;
-        properties: {};
-        scope: {};
-    }[];
-    context: {
-        get: {};
-        set: {};
-    };
-    exports: {
-        avatarService: {
-            code: string;
-            isFunction: boolean;
-            usedInLocal: boolean;
-        };
-    };
-    hooks: {
-        onMount: {
-            code: string;
-        };
-    };
-    imports: {
-        imports: {};
-        path: string;
-    }[];
-    inputs: never[];
-    meta: {
-        useMetadata: {
-            isAttachedToShadowDom: boolean;
-        };
-    };
-    name: string;
-    propsTypeRef: string;
-    refs: {};
-    state: {
-        classes: {
-            code: {
-                base: string;
-                container: string;
-            };
-            type: string;
-        };
-        initials: {
-            code: null;
-            type: string;
-        };
-        loaded: {
-            code: boolean;
-            type: string;
-        };
-        source: {
-            code: null;
-            type: string;
-        };
-        styles: {
-            code: {
-                container: null;
-            };
-            type: string;
-        };
-    };
-    subComponents: never[];
-    types: string[];
-};

package/types/blocks/avatar/avatar.model.d.ts

@@ -1,19 +0,0 @@
-import { BaseProps, BaseState, CSS, Dynamic, Variant } from '~/models';
-export declare type AvatarProps = {
-    variant?: Dynamic<Variant>;
-    name?: string;
-    unavatar?: string;
-    url?: string;
-    disabled?: boolean;
-} & BaseProps;
-export declare type AvatarState = {
-    classes: {
-        base: string;
-        container: string;
-    };
-    styles: {
-        container: CSS;
-    };
-    initials: string;
-    source: string;
-} & BaseState;

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

@@ -1,2 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getBlockBindings(state: any, block: BuilderBlock): Record<string, any>;