@builder.io/sdk-react-native 4.0.9 → 4.1.0

package/src/blocks/form/form/form.tsx

@@ -187,6 +187,18 @@ function FormComponent(props: FormProps) {
         }
       }
       setFormState("sending");
+      if (
+        props.sendSubmissionsTo === "email" &&
+        (props.sendSubmissionsToEmail === "your@email.com" ||
+          !props.sendSubmissionsToEmail)
+      ) {
+        const message =
+          "SubmissionsToEmail is required when sendSubmissionsTo is set to email";
+        console.error(message);
+        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(
@@ -203,17 +215,27 @@ function FormComponent(props: FormProps) {
           } else {
             body = await res.text();
           }
-          if (!res.ok && props.errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */ let message =
-              get(body, props.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.current?.nativeElement) {
+              formRef.current?.nativeElement.dispatchEvent(submitErrorEvent);
+              if (submitErrorEvent.defaultPrevented) {
+                return;
               }
-              setFormErrorMessage(message);
-              mergeNewRootState({ formErrorMessage: message });
             }
+            setResponseData(body);
+            setFormState("error");
+            let message = props.errorMessagePath
+              ? get(body, props.errorMessagePath)
+              : body.message || body.error || body;
+            if (typeof message !== "string") {
+              message = JSON.stringify(message);
+            }
+            setFormErrorMessage(message);
+            mergeNewRootState({ formErrorMessage: message });
+            return;
           }
           setResponseData(body);
           setFormState(res.ok ? "success" : "error");

package/src/blocks/img/img.tsx

@@ -37,9 +37,23 @@ export interface ImgProps {
 
 import { isEditing } from "../../functions/is-editing";
 import { filterAttrs } from "../helpers";
+import { getSrcSet } from "../image/image.helpers";
 import { setAttrs } from "../helpers";
 
 function ImgComponent(props: ImgProps) {
+  function srcSetToUse() {
+    const url = props.imgSrc || props.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);
+  }
+
   return (
     <Image
       style={{
@@ -49,6 +63,7 @@ function ImgComponent(props: ImgProps) {
       key={(isEditing() && props.imgSrc) || "default-key"}
       alt={props.altText}
       source={{ uri: props.imgSrc || props.image }}
+      srcSet={srcSetToUse()}
       {...{}}
       {...props.attributes}
     />

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.tsx

@@ -121,6 +121,9 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs) => {
         setUserAttributes(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);
 }