@builder.io/sdk-solid 4.0.10 → 4.1.1

package/lib/edge/dev.jsx

@@ -5165,10 +5165,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount10, on as on9, createEffect as createEffect9, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount10, on as on9, createEffect as createEffect9, createMemo as createMemo21, createSignal as createSignal21 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show16, For as For9, onMount as onMount9, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
+import { Show as Show16, For as For9, onMount as onMount9, createSignal as createSignal20, createMemo as createMemo20 } from "solid-js";
 
 // src/blocks/personalization-container/helpers/inlined-fns.ts
 function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
@@ -5591,7 +5591,7 @@ var getDefaultCanTrack = (canTrack) => {
 };
 
 // src/components/content/content.tsx
-import { Show as Show15, createSignal as createSignal18 } from "solid-js";
+import { Show as Show15, createSignal as createSignal19 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -7787,8 +7787,20 @@ var componentInfo19 = {
 };
 
 // src/blocks/img/img.tsx
+import { createMemo as createMemo15 } from "solid-js";
 function ImgComponent(props) {
+  const srcSetToUse = createMemo15(() => {
+    const url = props.imgSrc || props.image;
+    if (!url || typeof url !== "string") {
+      return void 0;
+    }
+    if (!url.match(/builder\.io/)) {
+      return void 0;
+    }
+    return getSrcSet(url);
+  });
   return <><img
+    loading="lazy"
     style={{
       "object-fit": props.backgroundSize || "cover",
       "object-position": props.backgroundPosition || "center"
@@ -7796,6 +7808,7 @@ function ImgComponent(props) {
     key={isEditing() && props.imgSrc || "default-key"}
     alt={props.altText}
     src={props.imgSrc || props.image}
+    srcSet={srcSetToUse()}
     {...{}}
     {...props.attributes}
   /></>;
@@ -7890,10 +7903,10 @@ var componentInfo20 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show13, onMount as onMount7, createSignal as createSignal15, createMemo as createMemo15 } from "solid-js";
+import { Show as Show13, onMount as onMount7, createSignal as createSignal16, createMemo as createMemo16 } from "solid-js";
 function Video(props) {
-  const [lazyVideoObserver, setLazyVideoObserver] = createSignal15(void 0);
-  const videoProps = createMemo15(() => {
+  const [lazyVideoObserver, setLazyVideoObserver] = createSignal16(void 0);
+  const videoProps = createMemo16(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -7912,7 +7925,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo15(() => {
+  const spreadProps = createMemo16(() => {
     return {
       ...videoProps()
     };
@@ -8152,8 +8165,8 @@ import {
   onMount as onMount8,
   on as on8,
   createEffect as createEffect8,
-  createMemo as createMemo16,
-  createSignal as createSignal16
+  createMemo as createMemo17,
+  createSignal as createSignal17
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -8163,7 +8176,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.1";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -9024,13 +9037,13 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [hasExecuted, setHasExecuted] = createSignal16(false);
-  const [ContentWrapper, setContentWrapper] = createSignal16(
+  const [hasExecuted, setHasExecuted] = createSignal17(false);
+  const [ContentWrapper, setContentWrapper] = createSignal17(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal16({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal16({});
-  const [clicked, setClicked] = createSignal16(false);
+  const [httpReqsData, setHttpReqsData] = createSignal17({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal17({});
+  const [clicked, setClicked] = createSignal17(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -9064,7 +9077,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo16(() => {
+  const showContentProps = createMemo17(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -9249,14 +9262,14 @@ function EnableEditor(props) {
       }
     }
   });
-  const onUpdateFn_0_props_content = createMemo16(() => props.content);
+  const onUpdateFn_0_props_content = createMemo17(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
   createEffect8(on8(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
+  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo17(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
@@ -9268,14 +9281,14 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_data = createMemo16(() => props.data);
+  const onUpdateFn_2_props_data = createMemo17(() => props.data);
   function onUpdateFn_2() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect8(on8(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
-  const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
+  const onUpdateFn_3_props_locale = createMemo17(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
       mergeNewRootState({
@@ -9307,9 +9320,9 @@ function EnableEditor(props) {
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal17 } from "solid-js";
+import { createSignal as createSignal18 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal17(
+  const [injectedStyles, setInjectedStyles] = createSignal18(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -9367,7 +9380,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal18(
+  const [scriptStr, setScriptStr] = createSignal19(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -9375,7 +9388,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal18(
+  const [registeredComponents, setRegisteredComponents] = createSignal19(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -9390,7 +9403,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal19({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -9498,13 +9511,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal19(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal20(
     checkShouldRenderVariants2({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo19(() => {
+  const updateCookieAndStylesScriptStr = createMemo20(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -9513,10 +9526,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo19(() => {
+  const hideVariantsStyleString = createMemo20(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo19(() => {
+  const defaultContent = createMemo20(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -9635,15 +9648,15 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol2(props) {
-  const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
-  const [symbolEntry, setSymbolEntry] = createSignal20(props.symbol?.entry);
-  const blocksWrapper = createMemo20(() => {
+  const [contentToUse, setContentToUse] = createSignal21(props.symbol?.content);
+  const [symbolEntry, setSymbolEntry] = createSignal21(props.symbol?.entry);
+  const blocksWrapper = createMemo21(() => {
     return "div";
   });
-  const contentWrapper = createMemo20(() => {
+  const contentWrapper = createMemo21(() => {
     return "div";
   });
-  const className = createMemo20(() => {
+  const className = createMemo21(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -9666,7 +9679,7 @@ function Symbol2(props) {
   }
   onMount10(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo21(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }

package/lib/edge/index.js

@@ -8267,8 +8267,18 @@ var componentInfo19 = {
   noWrap: true,
   static: true
 };
-var _tmpl$20 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<img loading=lazy>`);
 function ImgComponent(props) {
+  const srcSetToUse = createMemo(() => {
+    const url = props.imgSrc || props.image;
+    if (!url || typeof url !== "string") {
+      return void 0;
+    }
+    if (!url.match(/builder\.io/)) {
+      return void 0;
+    }
+    return getSrcSet(url);
+  });
   return (() => {
     const _el$ = _tmpl$20();
     spread(_el$, mergeProps({
@@ -8286,6 +8296,9 @@ function ImgComponent(props) {
       },
       get src() {
         return props.imgSrc || props.image;
+      },
+      get srcSet() {
+        return srcSetToUse();
       }
     }, {}, () => props.attributes), false, false);
     return _el$;
@@ -8656,7 +8669,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.1";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({

package/lib/edge/index.jsx

@@ -5157,10 +5157,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount10, on as on9, createEffect as createEffect9, createMemo as createMemo20, createSignal as createSignal20 } from "solid-js";
+import { onMount as onMount10, on as on9, createEffect as createEffect9, createMemo as createMemo21, createSignal as createSignal21 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show16, For as For9, onMount as onMount9, createSignal as createSignal19, createMemo as createMemo19 } from "solid-js";
+import { Show as Show16, For as For9, onMount as onMount9, createSignal as createSignal20, createMemo as createMemo20 } from "solid-js";
 
 // src/blocks/personalization-container/helpers/inlined-fns.ts
 function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
@@ -5583,7 +5583,7 @@ var getDefaultCanTrack = (canTrack) => {
 };
 
 // src/components/content/content.tsx
-import { Show as Show15, createSignal as createSignal18 } from "solid-js";
+import { Show as Show15, createSignal as createSignal19 } from "solid-js";
 
 // src/blocks/accordion/component-info.ts
 var defaultTitle = {
@@ -7777,8 +7777,20 @@ var componentInfo19 = {
 };
 
 // src/blocks/img/img.tsx
+import { createMemo as createMemo15 } from "solid-js";
 function ImgComponent(props) {
+  const srcSetToUse = createMemo15(() => {
+    const url = props.imgSrc || props.image;
+    if (!url || typeof url !== "string") {
+      return void 0;
+    }
+    if (!url.match(/builder\.io/)) {
+      return void 0;
+    }
+    return getSrcSet(url);
+  });
   return <><img
+    loading="lazy"
     style={{
       "object-fit": props.backgroundSize || "cover",
       "object-position": props.backgroundPosition || "center"
@@ -7786,6 +7798,7 @@ function ImgComponent(props) {
     key={isEditing() && props.imgSrc || "default-key"}
     alt={props.altText}
     src={props.imgSrc || props.image}
+    srcSet={srcSetToUse()}
     {...{}}
     {...props.attributes}
   /></>;
@@ -7880,10 +7893,10 @@ var componentInfo20 = {
 };
 
 // src/blocks/video/video.tsx
-import { Show as Show13, onMount as onMount7, createSignal as createSignal15, createMemo as createMemo15 } from "solid-js";
+import { Show as Show13, onMount as onMount7, createSignal as createSignal16, createMemo as createMemo16 } from "solid-js";
 function Video(props) {
-  const [lazyVideoObserver, setLazyVideoObserver] = createSignal15(void 0);
-  const videoProps = createMemo15(() => {
+  const [lazyVideoObserver, setLazyVideoObserver] = createSignal16(void 0);
+  const videoProps = createMemo16(() => {
     return {
       ...props.autoPlay === true ? {
         autoPlay: true
@@ -7902,7 +7915,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo15(() => {
+  const spreadProps = createMemo16(() => {
     return {
       ...videoProps()
     };
@@ -8141,8 +8154,8 @@ import {
   onMount as onMount8,
   on as on8,
   createEffect as createEffect8,
-  createMemo as createMemo16,
-  createSignal as createSignal16
+  createMemo as createMemo17,
+  createSignal as createSignal17
 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
@@ -8152,7 +8165,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.1";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -9007,13 +9020,13 @@ var getWrapperClassName = (variationId) => {
 
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
-  const [hasExecuted, setHasExecuted] = createSignal16(false);
-  const [ContentWrapper, setContentWrapper] = createSignal16(
+  const [hasExecuted, setHasExecuted] = createSignal17(false);
+  const [ContentWrapper, setContentWrapper] = createSignal17(
     props.contentWrapper || "div"
   );
-  const [httpReqsData, setHttpReqsData] = createSignal16({});
-  const [httpReqsPending, setHttpReqsPending] = createSignal16({});
-  const [clicked, setClicked] = createSignal16(false);
+  const [httpReqsData, setHttpReqsData] = createSignal17({});
+  const [httpReqsPending, setHttpReqsPending] = createSignal17({});
+  const [clicked, setClicked] = createSignal17(false);
   function mergeNewRootState(newData) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
@@ -9047,7 +9060,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo16(() => {
+  const showContentProps = createMemo17(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -9231,14 +9244,14 @@ function EnableEditor(props) {
       }
     }
   });
-  const onUpdateFn_0_props_content = createMemo16(() => props.content);
+  const onUpdateFn_0_props_content = createMemo17(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
       mergeNewContent(props.content);
     }
   }
   createEffect8(on8(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo16(
+  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo17(
     () => props.builderContextSignal.rootState
   );
   function onUpdateFn_1() {
@@ -9250,14 +9263,14 @@ function EnableEditor(props) {
       onUpdateFn_1
     )
   );
-  const onUpdateFn_2_props_data = createMemo16(() => props.data);
+  const onUpdateFn_2_props_data = createMemo17(() => props.data);
   function onUpdateFn_2() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
   createEffect8(on8(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
-  const onUpdateFn_3_props_locale = createMemo16(() => props.locale);
+  const onUpdateFn_3_props_locale = createMemo17(() => props.locale);
   function onUpdateFn_3() {
     if (props.locale) {
       mergeNewRootState({
@@ -9289,9 +9302,9 @@ function EnableEditor(props) {
 var Enable_editor_default = EnableEditor;
 
 // src/components/content/components/styles.tsx
-import { createSignal as createSignal17 } from "solid-js";
+import { createSignal as createSignal18 } from "solid-js";
 function ContentStyles(props) {
-  const [injectedStyles, setInjectedStyles] = createSignal17(
+  const [injectedStyles, setInjectedStyles] = createSignal18(
     `
 ${getCss({
       cssCode: props.cssCode,
@@ -9349,7 +9362,7 @@ var getContentInitialValue = ({
 
 // src/components/content/content.tsx
 function ContentComponent(props) {
-  const [scriptStr, setScriptStr] = createSignal18(
+  const [scriptStr, setScriptStr] = createSignal19(
     getUpdateVariantVisibilityScript({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
       variationId: props.content?.testVariationId,
@@ -9357,7 +9370,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal18(
+  const [registeredComponents, setRegisteredComponents] = createSignal19(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -9372,7 +9385,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal19({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -9480,13 +9493,13 @@ var Content_default = ContentComponent;
 
 // src/components/content-variants/content-variants.tsx
 function ContentVariants(props) {
-  const [shouldRenderVariants, setShouldRenderVariants] = createSignal19(
+  const [shouldRenderVariants, setShouldRenderVariants] = createSignal20(
     checkShouldRenderVariants2({
       canTrack: getDefaultCanTrack(props.canTrack),
       content: props.content
     })
   );
-  const updateCookieAndStylesScriptStr = createMemo19(() => {
+  const updateCookieAndStylesScriptStr = createMemo20(() => {
     return getUpdateCookieAndStylesScript(
       getVariants(props.content).map((value) => ({
         id: value.testVariationId,
@@ -9495,10 +9508,10 @@ function ContentVariants(props) {
       props.content?.id || ""
     );
   });
-  const hideVariantsStyleString = createMemo19(() => {
+  const hideVariantsStyleString = createMemo20(() => {
     return getVariants(props.content).map((value) => `.variant-${value.testVariationId} { display: none; } `).join("");
   });
-  const defaultContent = createMemo19(() => {
+  const defaultContent = createMemo20(() => {
     return shouldRenderVariants() ? {
       ...props.content,
       testVariationId: props.content?.id
@@ -9617,15 +9630,15 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol2(props) {
-  const [contentToUse, setContentToUse] = createSignal20(props.symbol?.content);
-  const [symbolEntry, setSymbolEntry] = createSignal20(props.symbol?.entry);
-  const blocksWrapper = createMemo20(() => {
+  const [contentToUse, setContentToUse] = createSignal21(props.symbol?.content);
+  const [symbolEntry, setSymbolEntry] = createSignal21(props.symbol?.entry);
+  const blocksWrapper = createMemo21(() => {
     return "div";
   });
-  const contentWrapper = createMemo20(() => {
+  const contentWrapper = createMemo21(() => {
     return "div";
   });
-  const className = createMemo20(() => {
+  const className = createMemo21(() => {
     return [
       ...[props.attributes[getClassPropName()]],
       "builder-symbol",
@@ -9648,7 +9661,7 @@ function Symbol2(props) {
   }
   onMount10(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo21(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }

package/lib/node/dev.js

@@ -5267,8 +5267,18 @@ var componentInfo19 = {
   noWrap: true,
   static: true
 };
-var _tmpl$20 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<img loading=lazy>`);
 function ImgComponent(props) {
+  const srcSetToUse = createMemo(() => {
+    const url = props.imgSrc || props.image;
+    if (!url || typeof url !== "string") {
+      return void 0;
+    }
+    if (!url.match(/builder\.io/)) {
+      return void 0;
+    }
+    return getSrcSet(url);
+  });
   return (() => {
     const _el$ = _tmpl$20();
     spread(_el$, mergeProps({
@@ -5286,6 +5296,9 @@ function ImgComponent(props) {
       },
       get src() {
         return props.imgSrc || props.image;
+      },
+      get srcSet() {
+        return srcSetToUse();
       }
     }, {}, () => props.attributes), false, false);
     return _el$;
@@ -5657,7 +5670,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.1";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({