@builder.io/sdk-solid 4.0.10 → 4.1.0

package/lib/browser/dev.js

@@ -5100,6 +5100,16 @@ var componentInfo19 = {
 };
 var _tmpl$20 = /* @__PURE__ */ template(`<img>`);
 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({
@@ -5117,6 +5127,9 @@ function ImgComponent(props) {
       },
       get src() {
         return props.imgSrc || props.image;
+      },
+      get srcSet() {
+        return srcSetToUse();
       }
     }, {}, () => props.attributes), false, false);
     return _el$;
@@ -5488,7 +5501,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({

package/lib/browser/dev.jsx

@@ -1982,10 +1982,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) {
@@ -2408,7 +2408,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 = {
@@ -4604,7 +4604,18 @@ 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
     style={{
       "object-fit": props.backgroundSize || "cover",
@@ -4613,6 +4624,7 @@ function ImgComponent(props) {
     key={isEditing() && props.imgSrc || "default-key"}
     alt={props.altText}
     src={props.imgSrc || props.image}
+    srcSet={srcSetToUse()}
     {...{}}
     {...props.attributes}
   /></>;
@@ -4707,10 +4719,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
@@ -4729,7 +4741,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo15(() => {
+  const spreadProps = createMemo16(() => {
     return {
       ...videoProps()
     };
@@ -4969,8 +4981,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";
 
@@ -4980,7 +4992,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5841,13 +5853,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,
@@ -5881,7 +5893,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo16(() => {
+  const showContentProps = createMemo17(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -6066,14 +6078,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() {
@@ -6085,14 +6097,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({
@@ -6124,9 +6136,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,
@@ -6184,7 +6196,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,
@@ -6192,7 +6204,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal18(
+  const [registeredComponents, setRegisteredComponents] = createSignal19(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -6207,7 +6219,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal19({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -6315,13 +6327,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,
@@ -6330,10 +6342,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
@@ -6452,15 +6464,15 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(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",
@@ -6483,7 +6495,7 @@ function Symbol(props) {
   }
   onMount10(() => {
   });
-  const onUpdateFn_0_props_symbol = createMemo20(() => props.symbol);
+  const onUpdateFn_0_props_symbol = createMemo21(() => props.symbol);
   function onUpdateFn_0() {
     setContent();
   }

package/lib/browser/index.js

@@ -5088,6 +5088,16 @@ var componentInfo19 = {
 };
 var _tmpl$20 = /* @__PURE__ */ template(`<img>`);
 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({
@@ -5105,6 +5115,9 @@ function ImgComponent(props) {
       },
       get src() {
         return props.imgSrc || props.image;
+      },
+      get srcSet() {
+        return srcSetToUse();
       }
     }, {}, () => props.attributes), false, false);
     return _el$;
@@ -5475,7 +5488,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({

package/lib/browser/index.jsx

@@ -1974,10 +1974,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) {
@@ -2400,7 +2400,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 = {
@@ -4594,7 +4594,18 @@ 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
     style={{
       "object-fit": props.backgroundSize || "cover",
@@ -4603,6 +4614,7 @@ function ImgComponent(props) {
     key={isEditing() && props.imgSrc || "default-key"}
     alt={props.altText}
     src={props.imgSrc || props.image}
+    srcSet={srcSetToUse()}
     {...{}}
     {...props.attributes}
   /></>;
@@ -4697,10 +4709,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
@@ -4719,7 +4731,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo15(() => {
+  const spreadProps = createMemo16(() => {
     return {
       ...videoProps()
     };
@@ -4958,8 +4970,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";
 
@@ -4969,7 +4981,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5824,13 +5836,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,
@@ -5864,7 +5876,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo16(() => {
+  const showContentProps = createMemo17(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -6048,14 +6060,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() {
@@ -6067,14 +6079,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({
@@ -6106,9 +6118,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,
@@ -6166,7 +6178,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,
@@ -6174,7 +6186,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal18(
+  const [registeredComponents, setRegisteredComponents] = createSignal19(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -6189,7 +6201,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal19({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -6297,13 +6309,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,
@@ -6312,10 +6324,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
@@ -6434,15 +6446,15 @@ var fetchSymbolContent = async ({
 
 // src/blocks/symbol/symbol.tsx
 function Symbol(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",
@@ -6465,7 +6477,7 @@ function Symbol(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/dev.js

@@ -8281,6 +8281,16 @@ var componentInfo19 = {
 };
 var _tmpl$20 = /* @__PURE__ */ template(`<img>`);
 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({
@@ -8298,6 +8308,9 @@ function ImgComponent(props) {
       },
       get src() {
         return props.imgSrc || props.image;
+      },
+      get srcSet() {
+        return srcSetToUse();
       }
     }, {}, () => props.attributes), false, false);
     return _el$;
@@ -8669,7 +8682,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.10";
+var SDK_VERSION = "4.1.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({