@builder.io/sdk-svelte 4.0.9 → 4.1.0

package/lib/browser/blocks/form/form/form.svelte

@@ -144,6 +144,16 @@ function onSubmit(event) {
             }
         }
         formState = "sending";
+        if (sendSubmissionsTo === "email" &&
+            (sendSubmissionsToEmail === "your@email.com" || !sendSubmissionsToEmail)) {
+            const message = "SubmissionsToEmail is required when sendSubmissionsTo is set to email";
+            console.error(message);
+            formState = "error";
+            mergeNewRootState({
+                formErrorMessage: message,
+            });
+            return;
+        }
         const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
         const url = sendSubmissionsTo === "email"
             ? formUrl
@@ -162,20 +172,32 @@ function onSubmit(event) {
             else {
                 body = await res.text();
             }
-            if (!res.ok && errorMessagePath) {
-                /* TODO: allow supplying an error formatter function */
-                let message = get(body, errorMessagePath);
-                if (message) {
-                    if (typeof message !== "string") {
-                        /* TODO: ideally convert json to yaml so it woul dbe like
-                   error: - email has been taken */
-                        message = JSON.stringify(message);
+            if (!res.ok) {
+                const submitErrorEvent = new CustomEvent("submit:error", {
+                    detail: {
+                        error: body,
+                        status: res.status,
+                    },
+                });
+                if (formRef?.nativeElement) {
+                    formRef?.nativeElement.dispatchEvent(submitErrorEvent);
+                    if (submitErrorEvent.defaultPrevented) {
+                        return;
                     }
-                    formErrorMessage = message;
-                    mergeNewRootState({
-                        formErrorMessage: message,
-                    });
                 }
+                responseData = body;
+                formState = "error";
+                let message = errorMessagePath
+                    ? get(body, errorMessagePath)
+                    : body.message || body.error || body;
+                if (typeof message !== "string") {
+                    message = JSON.stringify(message);
+                }
+                formErrorMessage = message;
+                mergeNewRootState({
+                    formErrorMessage: message,
+                });
+                return;
             }
             responseData = body;
             formState = res.ok ? "success" : "error";

package/lib/browser/blocks/img/img.svelte

@@ -5,12 +5,13 @@
 
 <script>import { isEditing } from "../../functions/is-editing";
 import { filterAttrs } from "../helpers";
+import { getSrcSet } from "../image/image.helpers";
 import { setAttrs } from "../helpers";
+export let imgSrc = undefined;
+export let image = undefined;
 export let backgroundSize = undefined;
 export let backgroundPosition = undefined;
-export let imgSrc = undefined;
 export let altText = undefined;
-export let image = undefined;
 export let attributes = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
@@ -22,6 +23,17 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
+$: srcSetToUse = () => {
+    const url = imgSrc || image;
+    if (!url || typeof url !== "string") {
+        return undefined;
+    }
+    // We can auto add srcset for cdn.builder.io images
+    if (!url.match(/builder\.io/)) {
+        return undefined;
+    }
+    return getSrcSet(url);
+};
 </script>
 
 {#key (isEditing() && imgSrc) || "default-key"}
@@ -32,6 +44,7 @@ function stringifyStyles(stylesObj) {
     })}
     alt={altText}
     src={imgSrc || image}
+    srcSet={srcSetToUse()}
     {...filterAttrs(attributes, "on:", false)}
     use:setAttrs={filterAttrs(attributes, "on:", true)}
   />

package/lib/browser/blocks/personalization-container/helpers.js

@@ -9,7 +9,7 @@ const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
 /**
  * SDKs that support Variant Containers
  */
-export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'];
+export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte', 'qwik'];
 /**
  * After hydration, we reset the tree
  * These SDKs handle Personalization Container in a special way:
@@ -19,7 +19,7 @@ export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'];
  * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
  * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
  */
-export const SDKS_REQUIRING_RESET_APPROACH = ['vue', 'svelte'];
+export const SDKS_REQUIRING_RESET_APPROACH = ['vue', 'svelte', 'qwik'];
 export function checkShouldRenderVariants(variants, canTrack) {
     const hasVariants = variants && variants.length > 0;
     if (TARGET === 'reactNative')

package/lib/browser/blocks/personalization-container/personalization-container.svelte

@@ -61,6 +61,8 @@ onMount(() => {
     shouldResetVariants = true;
     const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs) => {
         userAttributes = attrs;
+    }, {
+        fireImmediately: TARGET === "qwik",
     });
     if (!(isEditing() || isPreviewing())) {
         const variant = filteredVariants()[0];

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.0.9";
+export declare const SDK_VERSION = "4.1.0";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.9";
+export const SDK_VERSION = "4.1.0";

package/lib/browser/helpers/no-serialize-wrapper.d.ts

@@ -0,0 +1 @@
+export declare function noSerializeWrapper(fn: () => void): () => void;

package/lib/browser/helpers/no-serialize-wrapper.js

@@ -0,0 +1,3 @@
+export function noSerializeWrapper(fn) {
+    return fn;
+}

package/lib/browser/helpers/user-attributes.d.ts

@@ -5,13 +5,17 @@ export declare const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 export declare function createUserAttributesService(): {
     setUserAttributes(newAttrs: UserAttributes): void;
     getUserAttributes(): any;
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
+        fireImmediately?: boolean | undefined;
+    }): () => void;
     setCanTrack(value: boolean): void;
 };
 export declare const userAttributesService: {
     setUserAttributes(newAttrs: UserAttributes): void;
     getUserAttributes(): any;
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
+        fireImmediately?: boolean | undefined;
+    }): () => void;
     setCanTrack(value: boolean): void;
 };
 export declare const setClientUserAttributes: (attributes: UserAttributes) => void;

package/lib/browser/helpers/user-attributes.js

@@ -1,5 +1,7 @@
+import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
+import { noSerializeWrapper } from './no-serialize-wrapper';
 export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
 export function createUserAttributesService() {
     let canTrack = true;
@@ -29,18 +31,31 @@ export 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;
         }
     };
 }
-export const userAttributesService = createUserAttributesService();
+let _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();
+}
+export const userAttributesService = _userAttributesService;
 export const setClientUserAttributes = (attributes) => {
     userAttributesService.setUserAttributes(attributes);
 };

package/lib/edge/blocks/form/form/form.svelte

@@ -144,6 +144,16 @@ function onSubmit(event) {
             }
         }
         formState = "sending";
+        if (sendSubmissionsTo === "email" &&
+            (sendSubmissionsToEmail === "your@email.com" || !sendSubmissionsToEmail)) {
+            const message = "SubmissionsToEmail is required when sendSubmissionsTo is set to email";
+            console.error(message);
+            formState = "error";
+            mergeNewRootState({
+                formErrorMessage: message,
+            });
+            return;
+        }
         const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
         const url = sendSubmissionsTo === "email"
             ? formUrl
@@ -162,20 +172,32 @@ function onSubmit(event) {
             else {
                 body = await res.text();
             }
-            if (!res.ok && errorMessagePath) {
-                /* TODO: allow supplying an error formatter function */
-                let message = get(body, errorMessagePath);
-                if (message) {
-                    if (typeof message !== "string") {
-                        /* TODO: ideally convert json to yaml so it woul dbe like
-                   error: - email has been taken */
-                        message = JSON.stringify(message);
+            if (!res.ok) {
+                const submitErrorEvent = new CustomEvent("submit:error", {
+                    detail: {
+                        error: body,
+                        status: res.status,
+                    },
+                });
+                if (formRef?.nativeElement) {
+                    formRef?.nativeElement.dispatchEvent(submitErrorEvent);
+                    if (submitErrorEvent.defaultPrevented) {
+                        return;
                     }
-                    formErrorMessage = message;
-                    mergeNewRootState({
-                        formErrorMessage: message,
-                    });
                 }
+                responseData = body;
+                formState = "error";
+                let message = errorMessagePath
+                    ? get(body, errorMessagePath)
+                    : body.message || body.error || body;
+                if (typeof message !== "string") {
+                    message = JSON.stringify(message);
+                }
+                formErrorMessage = message;
+                mergeNewRootState({
+                    formErrorMessage: message,
+                });
+                return;
             }
             responseData = body;
             formState = res.ok ? "success" : "error";

package/lib/edge/blocks/img/img.svelte

@@ -5,12 +5,13 @@
 
 <script>import { isEditing } from "../../functions/is-editing";
 import { filterAttrs } from "../helpers";
+import { getSrcSet } from "../image/image.helpers";
 import { setAttrs } from "../helpers";
+export let imgSrc = undefined;
+export let image = undefined;
 export let backgroundSize = undefined;
 export let backgroundPosition = undefined;
-export let imgSrc = undefined;
 export let altText = undefined;
-export let image = undefined;
 export let attributes = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
@@ -22,6 +23,17 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
+$: srcSetToUse = () => {
+    const url = imgSrc || image;
+    if (!url || typeof url !== "string") {
+        return undefined;
+    }
+    // We can auto add srcset for cdn.builder.io images
+    if (!url.match(/builder\.io/)) {
+        return undefined;
+    }
+    return getSrcSet(url);
+};
 </script>
 
 {#key (isEditing() && imgSrc) || "default-key"}
@@ -32,6 +44,7 @@ function stringifyStyles(stylesObj) {
     })}
     alt={altText}
     src={imgSrc || image}
+    srcSet={srcSetToUse()}
     {...filterAttrs(attributes, "on:", false)}
     use:setAttrs={filterAttrs(attributes, "on:", true)}
   />

package/lib/edge/blocks/personalization-container/helpers.js

@@ -9,7 +9,7 @@ const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
 /**
  * SDKs that support Variant Containers
  */
-export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'];
+export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte', 'qwik'];
 /**
  * After hydration, we reset the tree
  * These SDKs handle Personalization Container in a special way:
@@ -19,7 +19,7 @@ export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'];
  * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
  * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
  */
-export const SDKS_REQUIRING_RESET_APPROACH = ['vue', 'svelte'];
+export const SDKS_REQUIRING_RESET_APPROACH = ['vue', 'svelte', 'qwik'];
 export function checkShouldRenderVariants(variants, canTrack) {
     const hasVariants = variants && variants.length > 0;
     if (TARGET === 'reactNative')

package/lib/edge/blocks/personalization-container/personalization-container.svelte

@@ -61,6 +61,8 @@ onMount(() => {
     shouldResetVariants = true;
     const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs) => {
         userAttributes = attrs;
+    }, {
+        fireImmediately: TARGET === "qwik",
     });
     if (!(isEditing() || isPreviewing())) {
         const variant = filteredVariants()[0];

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.0.9";
+export declare const SDK_VERSION = "4.1.0";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.9";
+export const SDK_VERSION = "4.1.0";

package/lib/edge/helpers/no-serialize-wrapper.d.ts

@@ -0,0 +1 @@
+export declare function noSerializeWrapper(fn: () => void): () => void;

package/lib/edge/helpers/no-serialize-wrapper.js

@@ -0,0 +1,3 @@
+export function noSerializeWrapper(fn) {
+    return fn;
+}

package/lib/edge/helpers/user-attributes.d.ts

@@ -5,13 +5,17 @@ export declare const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 export declare function createUserAttributesService(): {
     setUserAttributes(newAttrs: UserAttributes): void;
     getUserAttributes(): any;
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
+        fireImmediately?: boolean | undefined;
+    }): () => void;
     setCanTrack(value: boolean): void;
 };
 export declare const userAttributesService: {
     setUserAttributes(newAttrs: UserAttributes): void;
     getUserAttributes(): any;
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
+        fireImmediately?: boolean | undefined;
+    }): () => void;
     setCanTrack(value: boolean): void;
 };
 export declare const setClientUserAttributes: (attributes: UserAttributes) => void;

package/lib/edge/helpers/user-attributes.js

@@ -1,5 +1,7 @@
+import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
+import { noSerializeWrapper } from './no-serialize-wrapper';
 export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
 export function createUserAttributesService() {
     let canTrack = true;
@@ -29,18 +31,31 @@ export 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;
         }
     };
 }
-export const userAttributesService = createUserAttributesService();
+let _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();
+}
+export const userAttributesService = _userAttributesService;
 export const setClientUserAttributes = (attributes) => {
     userAttributesService.setUserAttributes(attributes);
 };

package/lib/node/blocks/form/form/form.svelte

@@ -144,6 +144,16 @@ function onSubmit(event) {
             }
         }
         formState = "sending";
+        if (sendSubmissionsTo === "email" &&
+            (sendSubmissionsToEmail === "your@email.com" || !sendSubmissionsToEmail)) {
+            const message = "SubmissionsToEmail is required when sendSubmissionsTo is set to email";
+            console.error(message);
+            formState = "error";
+            mergeNewRootState({
+                formErrorMessage: message,
+            });
+            return;
+        }
         const formUrl = `${getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
         const url = sendSubmissionsTo === "email"
             ? formUrl
@@ -162,20 +172,32 @@ function onSubmit(event) {
             else {
                 body = await res.text();
             }
-            if (!res.ok && errorMessagePath) {
-                /* TODO: allow supplying an error formatter function */
-                let message = get(body, errorMessagePath);
-                if (message) {
-                    if (typeof message !== "string") {
-                        /* TODO: ideally convert json to yaml so it woul dbe like
-                   error: - email has been taken */
-                        message = JSON.stringify(message);
+            if (!res.ok) {
+                const submitErrorEvent = new CustomEvent("submit:error", {
+                    detail: {
+                        error: body,
+                        status: res.status,
+                    },
+                });
+                if (formRef?.nativeElement) {
+                    formRef?.nativeElement.dispatchEvent(submitErrorEvent);
+                    if (submitErrorEvent.defaultPrevented) {
+                        return;
                     }
-                    formErrorMessage = message;
-                    mergeNewRootState({
-                        formErrorMessage: message,
-                    });
                 }
+                responseData = body;
+                formState = "error";
+                let message = errorMessagePath
+                    ? get(body, errorMessagePath)
+                    : body.message || body.error || body;
+                if (typeof message !== "string") {
+                    message = JSON.stringify(message);
+                }
+                formErrorMessage = message;
+                mergeNewRootState({
+                    formErrorMessage: message,
+                });
+                return;
             }
             responseData = body;
             formState = res.ok ? "success" : "error";

package/lib/node/blocks/img/img.svelte

@@ -5,12 +5,13 @@
 
 <script>import { isEditing } from "../../functions/is-editing";
 import { filterAttrs } from "../helpers";
+import { getSrcSet } from "../image/image.helpers";
 import { setAttrs } from "../helpers";
+export let imgSrc = undefined;
+export let image = undefined;
 export let backgroundSize = undefined;
 export let backgroundPosition = undefined;
-export let imgSrc = undefined;
 export let altText = undefined;
-export let image = undefined;
 export let attributes = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
@@ -22,6 +23,17 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
+$: srcSetToUse = () => {
+    const url = imgSrc || image;
+    if (!url || typeof url !== "string") {
+        return undefined;
+    }
+    // We can auto add srcset for cdn.builder.io images
+    if (!url.match(/builder\.io/)) {
+        return undefined;
+    }
+    return getSrcSet(url);
+};
 </script>
 
 {#key (isEditing() && imgSrc) || "default-key"}
@@ -32,6 +44,7 @@ function stringifyStyles(stylesObj) {
     })}
     alt={altText}
     src={imgSrc || image}
+    srcSet={srcSetToUse()}
     {...filterAttrs(attributes, "on:", false)}
     use:setAttrs={filterAttrs(attributes, "on:", true)}
   />

package/lib/node/blocks/personalization-container/helpers.js

@@ -9,7 +9,7 @@ const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
 /**
  * SDKs that support Variant Containers
  */
-export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'];
+export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte', 'qwik'];
 /**
  * After hydration, we reset the tree
  * These SDKs handle Personalization Container in a special way:
@@ -19,7 +19,7 @@ export const SDKS_SUPPORTING_PERSONALIZATION = ['react', 'vue', 'svelte'];
  * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
  * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
  */
-export const SDKS_REQUIRING_RESET_APPROACH = ['vue', 'svelte'];
+export const SDKS_REQUIRING_RESET_APPROACH = ['vue', 'svelte', 'qwik'];
 export function checkShouldRenderVariants(variants, canTrack) {
     const hasVariants = variants && variants.length > 0;
     if (TARGET === 'reactNative')

package/lib/node/blocks/personalization-container/personalization-container.svelte

@@ -61,6 +61,8 @@ onMount(() => {
     shouldResetVariants = true;
     const unsub = userAttributesService.subscribeOnUserAttributesChange((attrs) => {
         userAttributes = attrs;
+    }, {
+        fireImmediately: TARGET === "qwik",
     });
     if (!(isEditing() || isPreviewing())) {
         const variant = filteredVariants()[0];

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "4.0.9";
+export declare const SDK_VERSION = "4.1.0";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.9";
+export const SDK_VERSION = "4.1.0";

package/lib/node/helpers/no-serialize-wrapper.d.ts

@@ -0,0 +1 @@
+export declare function noSerializeWrapper(fn: () => void): () => void;

package/lib/node/helpers/no-serialize-wrapper.js

@@ -0,0 +1,3 @@
+export function noSerializeWrapper(fn) {
+    return fn;
+}

package/lib/node/helpers/user-attributes.d.ts

@@ -5,13 +5,17 @@ export declare const USER_ATTRIBUTES_COOKIE_NAME = "builder.userAttributes";
 export declare function createUserAttributesService(): {
     setUserAttributes(newAttrs: UserAttributes): void;
     getUserAttributes(): any;
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
+        fireImmediately?: boolean | undefined;
+    }): () => void;
     setCanTrack(value: boolean): void;
 };
 export declare const userAttributesService: {
     setUserAttributes(newAttrs: UserAttributes): void;
     getUserAttributes(): any;
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void): () => void;
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, { fireImmediately }?: {
+        fireImmediately?: boolean | undefined;
+    }): () => void;
     setCanTrack(value: boolean): void;
 };
 export declare const setClientUserAttributes: (attributes: UserAttributes) => void;

package/lib/node/helpers/user-attributes.js

@@ -1,5 +1,7 @@
+import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
+import { noSerializeWrapper } from './no-serialize-wrapper';
 export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
 export function createUserAttributesService() {
     let canTrack = true;
@@ -29,18 +31,31 @@ export 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;
         }
     };
 }
-export const userAttributesService = createUserAttributesService();
+let _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();
+}
+export const userAttributesService = _userAttributesService;
 export const setClientUserAttributes = (attributes) => {
     userAttributesService.setUserAttributes(attributes);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "4.0.9",
+  "version": "4.1.0",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/form/form/form.svelte

@@ -188,6 +188,19 @@
         }
       }
       formState = "sending";
+      if (
+        sendSubmissionsTo === "email" &&
+        (sendSubmissionsToEmail === "your@email.com" || !sendSubmissionsToEmail)
+      ) {
+        const message =
+          "SubmissionsToEmail is required when sendSubmissionsTo is set to email";
+        console.error(message);
+        formState = "error";
+        mergeNewRootState({
+          formErrorMessage: message,
+        });
+        return;
+      }
       const formUrl = `${
         getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"
       }/api/v1/form-submit?apiKey=${$builderContext.apiKey}&to=${btoa(
@@ -212,20 +225,32 @@
           } else {
             body = await res.text();
           }
-          if (!res.ok && errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */
-            let message = get(body, errorMessagePath);
-            if (message) {
-              if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like
-           error: - email has been taken */
-                message = JSON.stringify(message);
+          if (!res.ok) {
+            const submitErrorEvent = new CustomEvent("submit:error", {
+              detail: {
+                error: body,
+                status: res.status,
+              },
+            });
+            if (formRef?.nativeElement) {
+              formRef?.nativeElement.dispatchEvent(submitErrorEvent);
+              if (submitErrorEvent.defaultPrevented) {
+                return;
               }
-              formErrorMessage = message;
-              mergeNewRootState({
-                formErrorMessage: message,
-              });
             }
+            responseData = body;
+            formState = "error";
+            let message = errorMessagePath
+              ? get(body, errorMessagePath)
+              : body.message || body.error || body;
+            if (typeof message !== "string") {
+              message = JSON.stringify(message);
+            }
+            formErrorMessage = message;
+            mergeNewRootState({
+              formErrorMessage: message,
+            });
+            return;
           }
           responseData = body;
           formState = res.ok ? "success" : "error";

package/src/blocks/img/img.svelte

@@ -25,13 +25,14 @@
 <script lang="ts">
   import { isEditing } from "../../functions/is-editing";
   import { filterAttrs } from "../helpers";
+  import { getSrcSet } from "../image/image.helpers";
   import { setAttrs } from "../helpers";
 
+  export let imgSrc: ImgProps["imgSrc"] = undefined;
+  export let image: ImgProps["image"] = undefined;
   export let backgroundSize: ImgProps["backgroundSize"] = undefined;
   export let backgroundPosition: ImgProps["backgroundPosition"] = undefined;
-  export let imgSrc: ImgProps["imgSrc"] = undefined;
   export let altText: ImgProps["altText"] = undefined;
-  export let image: ImgProps["image"] = undefined;
   export let attributes: ImgProps["attributes"] = undefined;
   function stringifyStyles(stylesObj) {
     let styles = "";
@@ -43,6 +44,19 @@
     }
     return styles;
   }
+
+  $: srcSetToUse = () => {
+    const url = imgSrc || image;
+    if (!url || typeof url !== "string") {
+      return undefined;
+    }
+
+    // We can auto add srcset for cdn.builder.io images
+    if (!url.match(/builder\.io/)) {
+      return undefined;
+    }
+    return getSrcSet(url);
+  };
 </script>
 
 {#key (isEditing() && imgSrc) || "default-key"}
@@ -53,6 +67,7 @@
     })}
     alt={altText}
     src={imgSrc || image}
+    srcSet={srcSetToUse()}
     {...filterAttrs(attributes, "on:", false)}
     use:setAttrs={filterAttrs(attributes, "on:", true)}
   />

package/src/blocks/personalization-container/helpers.ts

@@ -30,7 +30,7 @@ type BlocksToRenderReturnType = {
 /**
  * SDKs that support Variant Containers
  */
-export const SDKS_SUPPORTING_PERSONALIZATION = (['react', 'vue', 'svelte'] as Target[]);
+export const SDKS_SUPPORTING_PERSONALIZATION = (['react', 'vue', 'svelte', 'qwik'] as Target[]);
 
 /**
  * After hydration, we reset the tree
@@ -41,7 +41,7 @@ export const SDKS_SUPPORTING_PERSONALIZATION = (['react', 'vue', 'svelte'] as Ta
  * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
  * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
  */
-export const SDKS_REQUIRING_RESET_APPROACH = (['vue', 'svelte'] as Target[]);
+export const SDKS_REQUIRING_RESET_APPROACH = (['vue', 'svelte', 'qwik'] as Target[]);
 export function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean) {
   const hasVariants = variants && variants.length > 0;
   if (TARGET === 'reactNative') return false;

package/src/blocks/personalization-container/personalization-container.svelte

@@ -101,6 +101,9 @@
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs) => {
         userAttributes = attrs;
+      },
+      {
+        fireImmediately: TARGET === "qwik",
       }
     );
     if (!(isEditing() || isPreviewing())) {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.0.9"
+export const SDK_VERSION = "4.1.0"

package/src/helpers/no-serialize-wrapper.ts

@@ -0,0 +1,3 @@
+export function noSerializeWrapper(fn: () => void) {
+  return fn;
+}

package/src/helpers/user-attributes.ts

@@ -1,5 +1,7 @@
+import { TARGET } from '../constants/target';
 import { isBrowser } from '../functions/is-browser';
 import { getCookieSync, setCookie } from './cookie';
+import { noSerializeWrapper } from './no-serialize-wrapper';
 export interface UserAttributes {
   [key: string]: any;
 }
@@ -32,18 +34,34 @@ export function createUserAttributesService() {
         canTrack
       }) || '{}');
     },
-    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void) {
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void, {
+      fireImmediately
+    }: {
+      fireImmediately?: boolean;
+    } = {}) {
       subscribers.add(callback);
-      return () => {
+      if (fireImmediately) {
+        callback(this.getUserAttributes());
+      }
+      return noSerializeWrapper(function () {
         subscribers.delete(callback);
-      };
+      });
     },
     setCanTrack(value: boolean) {
       canTrack = value;
     }
   };
 }
-export const userAttributesService = createUserAttributesService();
+let _userAttributesService: ReturnType<typeof createUserAttributesService>;
+if (isBrowser() && TARGET === 'qwik') {
+  if (!(window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__) {
+    (window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__ = createUserAttributesService();
+  }
+  _userAttributesService = (window as any).__BUILDER_USER_ATTRIBUTES_SERVICE__;
+} else {
+  _userAttributesService = createUserAttributesService();
+}
+export const userAttributesService = _userAttributesService;
 export const setClientUserAttributes = (attributes: UserAttributes) => {
   userAttributesService.setUserAttributes(attributes);
 }