@builder.io/sdk-solid 4.0.9 → 4.1.0

package/lib/browser/index.js

@@ -2307,8 +2307,8 @@ var DEFAULT_INDEX = "default";
 var FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = "filterWithCustomTargeting";
 var BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = "builderIoPersonalization";
 var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "updateVisibilityStylesScript";
-var SDKS_SUPPORTING_PERSONALIZATION = ["react", "vue", "svelte"];
-var SDKS_REQUIRING_RESET_APPROACH = ["vue", "svelte"];
+var SDKS_SUPPORTING_PERSONALIZATION = ["react", "vue", "svelte", "qwik"];
+var SDKS_REQUIRING_RESET_APPROACH = ["vue", "svelte", "qwik"];
 function checkShouldRenderVariants(variants, canTrack) {
   const hasVariants = variants && variants.length > 0;
   if (TARGET === "reactNative")
@@ -2566,6 +2566,11 @@ var handleABTesting = async ({
   };
 };
 
+// src/helpers/no-serialize-wrapper.ts
+function noSerializeWrapper(fn) {
+  return fn;
+}
+
 // src/helpers/user-attributes.ts
 var USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 function createUserAttributesService() {
@@ -2596,18 +2601,32 @@ function createUserAttributesService() {
         canTrack
       }) || "{}");
     },
-    subscribeOnUserAttributesChange(callback) {
+    subscribeOnUserAttributesChange(callback, {
+      fireImmediately
+    } = {}) {
       subscribers.add(callback);
-      return () => {
+      if (fireImmediately) {
+        callback(this.getUserAttributes());
+      }
+      return noSerializeWrapper(function() {
         subscribers.delete(callback);
-      };
+      });
     },
     setCanTrack(value) {
       canTrack = value;
     }
   };
 }
-var userAttributesService = createUserAttributesService();
+var _userAttributesService;
+if (isBrowser() && TARGET === "qwik") {
+  if (!window.__BUILDER_USER_ATTRIBUTES_SERVICE__) {
+    window.__BUILDER_USER_ATTRIBUTES_SERVICE__ = createUserAttributesService();
+  }
+  _userAttributesService = window.__BUILDER_USER_ATTRIBUTES_SERVICE__;
+} else {
+  _userAttributesService = createUserAttributesService();
+}
+var userAttributesService = _userAttributesService;
 var setClientUserAttributes = (attributes) => {
   userAttributesService.setUserAttributes(attributes);
 };
@@ -3462,6 +3481,8 @@ function PersonalizationContainer(props) {
     setShouldResetVariants(true);
     const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs2) => {
       setUserAttributes(attrs2);
+    }, {
+      fireImmediately: TARGET === "qwik"
     });
     if (!(isEditing() || isPreviewing())) {
       const variant = filteredVariants()[0];
@@ -4479,9 +4500,9 @@ function logFetch(url) {
 }
 
 // src/blocks/form/form/form.tsx
-var _tmpl$15 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-04a43b72">`);
+var _tmpl$15 = /* @__PURE__ */ template(`<pre class="builder-form-error-text pre-7430044e">`);
 var _tmpl$26 = /* @__PURE__ */ template(`<form>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-04a43b72 {
+var _tmpl$34 = /* @__PURE__ */ template(`<style>.pre-7430044e {
   padding: 10px;
   color: red;
   text-align: center;
@@ -4593,6 +4614,14 @@ function FormComponent(props) {
         }
       }
       setFormState("sending");
+      if (props.sendSubmissionsTo === "email" && (props.sendSubmissionsToEmail === "your@email.com" || !props.sendSubmissionsToEmail)) {
+        const message = "SubmissionsToEmail is required when sendSubmissionsTo is set to email";
+        setFormState("error");
+        mergeNewRootState({
+          formErrorMessage: message
+        });
+        return;
+      }
       const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${props.builderContext.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
       const url = props.sendSubmissionsTo === "email" ? formUrl : props.action;
       logFetch(url);
@@ -4608,17 +4637,30 @@ function FormComponent(props) {
         } else {
           body2 = await res.text();
         }
-        if (!res.ok && props.errorMessagePath) {
-          let message = get(body2, props.errorMessagePath);
-          if (message) {
-            if (typeof message !== "string") {
-              message = JSON.stringify(message);
+        if (!res.ok) {
+          const submitErrorEvent = new CustomEvent("submit:error", {
+            detail: {
+              error: body2,
+              status: res.status
             }
-            setFormErrorMessage(message);
-            mergeNewRootState({
-              formErrorMessage: message
-            });
+          });
+          if (formRef?.nativeElement) {
+            formRef?.nativeElement.dispatchEvent(submitErrorEvent);
+            if (submitErrorEvent.defaultPrevented) {
+              return;
+            }
+          }
+          setResponseData(body2);
+          setFormState("error");
+          let message = props.errorMessagePath ? get(body2, props.errorMessagePath) : body2.message || body2.error || body2;
+          if (typeof message !== "string") {
+            message = JSON.stringify(message);
           }
+          setFormErrorMessage(message);
+          mergeNewRootState({
+            formErrorMessage: message
+          });
+          return;
         }
         setResponseData(body2);
         setFormState(res.ok ? "success" : "error");
@@ -5046,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({
@@ -5063,6 +5115,9 @@ function ImgComponent(props) {
       },
       get src() {
         return props.imgSrc || props.image;
+      },
+      get srcSet() {
+        return srcSetToUse();
       }
     }, {}, () => props.attributes), false, false);
     return _el$;
@@ -5433,7 +5488,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.9";
+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) {
@@ -2068,8 +2068,8 @@ var DEFAULT_INDEX = "default";
 var FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = "filterWithCustomTargeting";
 var BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = "builderIoPersonalization";
 var UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = "updateVisibilityStylesScript";
-var SDKS_SUPPORTING_PERSONALIZATION = ["react", "vue", "svelte"];
-var SDKS_REQUIRING_RESET_APPROACH = ["vue", "svelte"];
+var SDKS_SUPPORTING_PERSONALIZATION = ["react", "vue", "svelte", "qwik"];
+var SDKS_REQUIRING_RESET_APPROACH = ["vue", "svelte", "qwik"];
 function checkShouldRenderVariants(variants, canTrack) {
   const hasVariants = variants && variants.length > 0;
   if (TARGET === "reactNative")
@@ -2327,6 +2327,11 @@ var handleABTesting = async ({
   };
 };
 
+// src/helpers/no-serialize-wrapper.ts
+function noSerializeWrapper(fn) {
+  return fn;
+}
+
 // src/helpers/user-attributes.ts
 var USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 function createUserAttributesService() {
@@ -2357,18 +2362,32 @@ function createUserAttributesService() {
         canTrack
       }) || "{}");
     },
-    subscribeOnUserAttributesChange(callback) {
+    subscribeOnUserAttributesChange(callback, {
+      fireImmediately
+    } = {}) {
       subscribers.add(callback);
-      return () => {
+      if (fireImmediately) {
+        callback(this.getUserAttributes());
+      }
+      return noSerializeWrapper(function() {
         subscribers.delete(callback);
-      };
+      });
     },
     setCanTrack(value) {
       canTrack = value;
     }
   };
 }
-var userAttributesService = createUserAttributesService();
+var _userAttributesService;
+if (isBrowser() && TARGET === "qwik") {
+  if (!window.__BUILDER_USER_ATTRIBUTES_SERVICE__) {
+    window.__BUILDER_USER_ATTRIBUTES_SERVICE__ = createUserAttributesService();
+  }
+  _userAttributesService = window.__BUILDER_USER_ATTRIBUTES_SERVICE__;
+} else {
+  _userAttributesService = createUserAttributesService();
+}
+var userAttributesService = _userAttributesService;
 var setClientUserAttributes = (attributes) => {
   userAttributesService.setUserAttributes(attributes);
 };
@@ -2381,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 = {
@@ -3210,6 +3229,9 @@ function PersonalizationContainer(props) {
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs2) => {
         setUserAttributes(attrs2);
+      },
+      {
+        fireImmediately: TARGET === "qwik"
       }
     );
     if (!(isEditing() || isPreviewing())) {
@@ -4190,6 +4212,14 @@ function FormComponent(props) {
         }
       }
       setFormState("sending");
+      if (props.sendSubmissionsTo === "email" && (props.sendSubmissionsToEmail === "your@email.com" || !props.sendSubmissionsToEmail)) {
+        const message = "SubmissionsToEmail is required when sendSubmissionsTo is set to email";
+        setFormState("error");
+        mergeNewRootState({
+          formErrorMessage: message
+        });
+        return;
+      }
       const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${props.builderContext.apiKey}&to=${btoa(
         props.sendSubmissionsToEmail || ""
       )}&name=${encodeURIComponent(props.name || "")}`;
@@ -4208,17 +4238,30 @@ function FormComponent(props) {
           } else {
             body2 = await res.text();
           }
-          if (!res.ok && props.errorMessagePath) {
-            let message = get(body2, props.errorMessagePath);
-            if (message) {
-              if (typeof message !== "string") {
-                message = JSON.stringify(message);
+          if (!res.ok) {
+            const submitErrorEvent = new CustomEvent("submit:error", {
+              detail: {
+                error: body2,
+                status: res.status
+              }
+            });
+            if (formRef?.nativeElement) {
+              formRef?.nativeElement.dispatchEvent(submitErrorEvent);
+              if (submitErrorEvent.defaultPrevented) {
+                return;
               }
-              setFormErrorMessage(message);
-              mergeNewRootState({
-                formErrorMessage: message
-              });
             }
+            setResponseData(body2);
+            setFormState("error");
+            let message = props.errorMessagePath ? get(body2, props.errorMessagePath) : body2.message || body2.error || body2;
+            if (typeof message !== "string") {
+              message = JSON.stringify(message);
+            }
+            setFormErrorMessage(message);
+            mergeNewRootState({
+              formErrorMessage: message
+            });
+            return;
           }
           setResponseData(body2);
           setFormState(res.ok ? "success" : "error");
@@ -4297,14 +4340,14 @@ function FormComponent(props) {
         blocks={props.sendingMessage}
         context={props.builderContext}
       /></Show12>
-      <Show12 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-04a43b72">{JSON.stringify(responseData(), null, 2)}</pre></Show12>
+      <Show12 when={submissionState() === "error" && responseData()}><pre class="builder-form-error-text pre-7430044e">{JSON.stringify(responseData(), null, 2)}</pre></Show12>
       <Show12 when={submissionState() === "success"}><Blocks_default
         path="successMessage"
         blocks={props.successMessage}
         context={props.builderContext}
       /></Show12>
     </form>
-    <style>{`.pre-04a43b72 {
+    <style>{`.pre-7430044e {
   padding: 10px;
   color: red;
   text-align: center;
@@ -4551,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",
@@ -4560,6 +4614,7 @@ function ImgComponent(props) {
     key={isEditing() && props.imgSrc || "default-key"}
     alt={props.altText}
     src={props.imgSrc || props.image}
+    srcSet={srcSetToUse()}
     {...{}}
     {...props.attributes}
   /></>;
@@ -4654,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
@@ -4676,7 +4731,7 @@ function Video(props) {
       } : {}
     };
   });
-  const spreadProps = createMemo15(() => {
+  const spreadProps = createMemo16(() => {
     return {
       ...videoProps()
     };
@@ -4915,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";
 
@@ -4926,7 +4981,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "4.0.9";
+var SDK_VERSION = "4.1.0";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5781,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,
@@ -5821,7 +5876,7 @@ function EnableEditor(props) {
       content: newContentValue
     }));
   }
-  const showContentProps = createMemo16(() => {
+  const showContentProps = createMemo17(() => {
     return props.showContent ? {} : {
       hidden: true,
       "aria-hidden": true
@@ -6005,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() {
@@ -6024,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({
@@ -6063,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,
@@ -6123,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,
@@ -6131,7 +6186,7 @@ function ContentComponent(props) {
       contentId: props.content?.id
     })
   );
-  const [registeredComponents, setRegisteredComponents] = createSignal18(
+  const [registeredComponents, setRegisteredComponents] = createSignal19(
     [
       ...getDefaultRegisteredComponents(),
       ...props.customComponents || []
@@ -6146,7 +6201,7 @@ function ContentComponent(props) {
       {}
     )
   );
-  const [builderContextSignal, setBuilderContextSignal] = createSignal18({
+  const [builderContextSignal, setBuilderContextSignal] = createSignal19({
     content: getContentInitialValue({
       content: props.content,
       data: props.data
@@ -6254,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,
@@ -6269,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
@@ -6391,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",
@@ -6422,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();
   }