@builder.io/sdk-solid 0.1.2 → 0.1.3

package/src/blocks/form/form.jsx

@@ -1,15 +1,22 @@
 import { useContext, Show, For, createSignal } from "solid-js";
+
 import { css } from "solid-styled-components";
+
 import RenderBlock from "../../components/render-block/render-block.jsx";
 import BuilderBlocks from "../../components/render-blocks.jsx";
 import { isEditing } from "../../functions/is-editing.js";
+
 function FormComponent(props) {
   const [formState, setFormState] = createSignal("unsubmitted");
+
   const [responseData, setResponseData] = createSignal(null);
+
   const [formErrorMessage, setFormErrorMessage] = createSignal("");
+
   function submissionState() {
-    return isEditing() && props.previewState || formState();
+    return (isEditing() && props.previewState) || formState();
   }
+
   function onSubmit(event) {
     const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
     if (props.sendSubmissionsTo === "zapier") {
@@ -26,47 +33,53 @@ function FormComponent(props) {
       const formData = new FormData(el);
 
       // TODO: maybe support null
-      const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter(el => !!el.name).map(el => {
-        let value;
-        const key = el.name;
-        if (el instanceof HTMLInputElement) {
-          if (el.type === "radio") {
-            if (el.checked) {
-              value = el.name;
-              return {
-                key,
-                value
-              };
-            }
-          } else if (el.type === "checkbox") {
-            value = el.checked;
-          } else if (el.type === "number" || el.type === "range") {
-            const num = el.valueAsNumber;
-            if (!isNaN(num)) {
-              value = num;
+      const formPairs = Array.from(
+        event.currentTarget.querySelectorAll("input,select,textarea")
+      )
+        .filter((el) => !!el.name)
+        .map((el) => {
+          let value;
+          const key = el.name;
+          if (el instanceof HTMLInputElement) {
+            if (el.type === "radio") {
+              if (el.checked) {
+                value = el.name;
+                return {
+                  key,
+                  value,
+                };
+              }
+            } else if (el.type === "checkbox") {
+              value = el.checked;
+            } else if (el.type === "number" || el.type === "range") {
+              const num = el.valueAsNumber;
+              if (!isNaN(num)) {
+                value = num;
+              }
+            } else if (el.type === "file") {
+              // TODO: one vs multiple files
+              value = el.files;
+            } else {
+              value = el.value;
             }
-          } else if (el.type === "file") {
-            // TODO: one vs multiple files
-            value = el.files;
           } else {
             value = el.value;
           }
-        } else {
-          value = el.value;
-        }
-        return {
-          key,
-          value
-        };
-      });
+          return {
+            key,
+            value,
+          };
+        });
       let contentType = props.contentType;
       if (props.sendSubmissionsTo === "email") {
         contentType = "multipart/form-data";
       }
-      Array.from(formPairs).forEach(({
-        value
-      }) => {
-        if (value instanceof File || Array.isArray(value) && value[0] instanceof File || value instanceof FileList) {
+      Array.from(formPairs).forEach(({ value }) => {
+        if (
+          value instanceof File ||
+          (Array.isArray(value) && value[0] instanceof File) ||
+          value instanceof FileList
+        ) {
           contentType = "multipart/form-data";
         }
       });
@@ -79,24 +92,23 @@ function FormComponent(props) {
       } else {
         // Json
         const json = {};
-        Array.from(formPairs).forEach(({
-          value,
-          key
-        }) => {
+        Array.from(formPairs).forEach(({ value, key }) => {
           set(json, key, value);
         });
         body = JSON.stringify(json);
       }
       if (contentType && contentType !== "multipart/form-data") {
-        if ( /* Zapier doesn't allow content-type header to be sent from browsers */
-        !(sendWithJs && props.action?.includes("zapier.com"))) {
+        if (
+          /* Zapier doesn't allow content-type header to be sent from browsers */
+          !(sendWithJs && props.action?.includes("zapier.com"))
+        ) {
           headers["content-type"] = contentType;
         }
       }
       const presubmitEvent = new CustomEvent("presubmit", {
         detail: {
-          body
-        }
+          body,
+        },
       });
       if (formRef) {
         formRef.dispatchEvent(presubmitEvent);
@@ -105,114 +117,156 @@ function FormComponent(props) {
         }
       }
       setFormState("sending");
-      const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
-      fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action /* TODO: throw error if no action URL */, {
-        body,
-        headers,
-        method: props.method || "post"
-      }).then(async res => {
-        let body;
-        const contentType = res.headers.get("content-type");
-        if (contentType && contentType.indexOf("application/json") !== -1) {
-          body = await res.json();
-        } else {
-          body = await res.text();
+      const formUrl = `${
+        builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
+      }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
+        props.sendSubmissionsToEmail || ""
+      )}&name=${encodeURIComponent(props.name || "")}`;
+      fetch(
+        props.sendSubmissionsTo === "email"
+          ? formUrl
+          : props.action /* TODO: throw error if no action URL */,
+        {
+          body,
+          headers,
+          method: props.method || "post",
         }
-        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);
-            }
-            setFormErrorMessage(message);
+      ).then(
+        async (res) => {
+          let body;
+          const contentType = res.headers.get("content-type");
+          if (contentType && contentType.indexOf("application/json") !== -1) {
+            body = await res.json();
+          } else {
+            body = await res.text();
           }
-        }
-        setResponseData(body);
-        setFormState(res.ok ? "success" : "error");
-        if (res.ok) {
-          const submitSuccessEvent = new CustomEvent("submit:success", {
-            detail: {
-              res,
-              body
-            }
-          });
-          if (formRef) {
-            formRef.dispatchEvent(submitSuccessEvent);
-            if (submitSuccessEvent.defaultPrevented) {
-              return;
-            }
-            /* TODO: option to turn this on/off? */
-            if (props.resetFormOnSubmit !== false) {
-              formRef.reset();
+          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);
+              }
+              setFormErrorMessage(message);
             }
           }
-
-          /* TODO: client side route event first that can be preventDefaulted */
-          if (props.successUrl) {
+          setResponseData(body);
+          setFormState(res.ok ? "success" : "error");
+          if (res.ok) {
+            const submitSuccessEvent = new CustomEvent("submit:success", {
+              detail: {
+                res,
+                body,
+              },
+            });
             if (formRef) {
-              const event = new CustomEvent("route", {
-                detail: {
-                  url: props.successUrl
+              formRef.dispatchEvent(submitSuccessEvent);
+              if (submitSuccessEvent.defaultPrevented) {
+                return;
+              }
+              /* TODO: option to turn this on/off? */
+              if (props.resetFormOnSubmit !== false) {
+                formRef.reset();
+              }
+            }
+
+            /* TODO: client side route event first that can be preventDefaulted */
+            if (props.successUrl) {
+              if (formRef) {
+                const event = new CustomEvent("route", {
+                  detail: {
+                    url: props.successUrl,
+                  },
+                });
+                formRef.dispatchEvent(event);
+                if (!event.defaultPrevented) {
+                  location.href = props.successUrl;
                 }
-              });
-              formRef.dispatchEvent(event);
-              if (!event.defaultPrevented) {
+              } else {
                 location.href = props.successUrl;
               }
-            } else {
-              location.href = props.successUrl;
             }
           }
-        }
-      }, err => {
-        const submitErrorEvent = new CustomEvent("submit:error", {
-          detail: {
-            error: err
-          }
-        });
-        if (formRef) {
-          formRef.dispatchEvent(submitErrorEvent);
-          if (submitErrorEvent.defaultPrevented) {
-            return;
+        },
+        (err) => {
+          const submitErrorEvent = new CustomEvent("submit:error", {
+            detail: {
+              error: err,
+            },
+          });
+          if (formRef) {
+            formRef.dispatchEvent(submitErrorEvent);
+            if (submitErrorEvent.defaultPrevented) {
+              return;
+            }
           }
+          setResponseData(err);
+          setFormState("error");
         }
-        setResponseData(err);
-        setFormState("error");
-      });
+      );
     }
   }
+
   let formRef;
+
   const builderContext = useContext(BuilderContext);
-  return <form validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={event => onSubmit(event)} {...props.attributes}>
+
+  return (
+    <form
+      validate={props.validate}
+      ref={formRef}
+      action={!props.sendWithJs && props.action}
+      method={props.method}
+      name={props.name}
+      onSubmit={(event) => onSubmit(event)}
+      {...props.attributes}
+    >
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
           {(block, _index) => {
-          const index = _index();
-          return <RenderBlock block={block} context={builderContext}></RenderBlock>;
-        }}
+            const index = _index();
+            return (
+              <RenderBlock block={block} context={builderContext}></RenderBlock>
+            );
+          }}
         </For>
       </Show>
       <Show when={submissionState() === "error"}>
-        <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage}></BuilderBlocks>
+        <BuilderBlocks
+          dataPath="errorMessage"
+          blocks={props.errorMessage}
+        ></BuilderBlocks>
       </Show>
       <Show when={submissionState() === "sending"}>
-        <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage}></BuilderBlocks>
+        <BuilderBlocks
+          dataPath="sendingMessage"
+          blocks={props.sendingMessage}
+        ></BuilderBlocks>
       </Show>
       <Show when={submissionState() === "error" && responseData()}>
-        <pre class={"builder-form-error-text " + css({
-        padding: "10px",
-        color: "red",
-        textAlign: "center"
-      })}>
+        <pre
+          class={
+            "builder-form-error-text " +
+            css({
+              padding: "10px",
+              color: "red",
+              textAlign: "center",
+            })
+          }
+        >
           {JSON.stringify(responseData(), null, 2)}
         </pre>
       </Show>
       <Show when={submissionState() === "success"}>
-        <BuilderBlocks dataPath="successMessage" blocks={props.successMessage}></BuilderBlocks>
+        <BuilderBlocks
+          dataPath="successMessage"
+          blocks={props.successMessage}
+        ></BuilderBlocks>
       </Show>
-    </form>;
+    </form>
+  );
 }
-export default FormComponent;
+
+export default FormComponent;

package/src/blocks/fragment/fragment.jsx

@@ -1,4 +1,5 @@
 function FragmentComponent(props) {
   return <span>{props.children}</span>;
 }
-export default FragmentComponent;
+
+export default FragmentComponent;

package/src/blocks/image/image.jsx

@@ -1,14 +1,19 @@
-import { Show } from "solid-js";
+import { Show, createSignal } from "solid-js";
+
 import { css } from "solid-styled-components";
+
 import { getSrcSet } from "./image.helpers.js";
+
 function Image(props) {
   function srcSetToUse() {
     const imageToUse = props.image || props.src;
     const url = imageToUse;
-    if (!url ||
-    // We can auto add srcset for cdn.builder.io and shopify
-    // images, otherwise you can supply this prop manually
-    !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
+    if (
+      !url ||
+      // We can auto add srcset for cdn.builder.io and shopify
+      // images, otherwise you can supply this prop manually
+      !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))
+    ) {
       return props.srcset;
     }
     if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
@@ -21,6 +26,7 @@ function Image(props) {
     }
     return getSrcSet(url);
   }
+
   function webpSrcSet() {
     if (srcSetToUse()?.match(/builder\.io/) && !props.noWebp) {
       return srcSetToUse().replace(/\?/g, "?format=webp&");
@@ -28,60 +34,91 @@ function Image(props) {
       return "";
     }
   }
+
   function aspectRatioCss() {
     const aspectRatioStyles = {
       position: "absolute",
       height: "100%",
       width: "100%",
       left: "0px",
-      top: "0px"
+      top: "0px",
     };
     const out = props.aspectRatio ? aspectRatioStyles : undefined;
     return out;
   }
-  return <>
+
+  return (
+    <>
       <picture>
         <Show when={webpSrcSet()}>
           <source type="image/webp" srcset={webpSrcSet()} />
         </Show>
-        <img class={"builder-image" + (props.className ? " " + props.className : "") + " " + css({
-        opacity: "1",
-        transition: "opacity 0.2s ease-in-out"
-      })} loading="lazy" alt={props.altText} role={props.altText ? "presentation" : undefined} style={{
-        "object-position": props.backgroundPosition || "center",
-        "object-fit": props.backgroundSize || "cover",
-        ...aspectRatioCss()
-      }} src={props.image} srcset={srcSetToUse()} sizes={props.sizes} />
-        <source srcset={srcSetToUse()} />
+        <img
+          class={
+            "builder-image" +
+            (props.className ? " " + props.className : "") +
+            " " +
+            css({
+              opacity: "1",
+              transition: "opacity 0.2s ease-in-out",
+            })
+          }
+          loading="lazy"
+          alt={props.altText}
+          role={props.altText ? "presentation" : undefined}
+          style={{
+            "object-position": props.backgroundPosition || "center",
+            "object-fit": props.backgroundSize || "cover",
+            ...aspectRatioCss(),
+          }}
+          src={props.image}
+          srcset={srcSetToUse()}
+          sizes={props.sizes}
+        />
       </picture>
-      <Show when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}>
-        <div class={"builder-image-sizer " + css({
-        width: "100%",
-        pointerEvents: "none",
-        fontSize: "0"
-      })} style={{
-        "padding-top":
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        props.aspectRatio * 100 + "%"
-      }}></div>
+      <Show
+        when={
+          props.aspectRatio &&
+          !(props.builderBlock?.children?.length && props.fitContent)
+        }
+      >
+        <div
+          class={
+            "builder-image-sizer " +
+            css({
+              width: "100%",
+              pointerEvents: "none",
+              fontSize: "0",
+            })
+          }
+          style={{
+            "padding-top":
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              props.aspectRatio * 100 + "%",
+          }}
+        ></div>
       </Show>
       <Show when={props.builderBlock?.children?.length && props.fitContent}>
         {props.children}
       </Show>
       <Show when={!props.fitContent && props.children}>
-        <div class={css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch",
-        position: "absolute",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%"
-      })}>
+        <div
+          class={css({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+          })}
+        >
           {props.children}
         </div>
       </Show>
-    </>;
+    </>
+  );
 }
-export default Image;
+
+export default Image;

package/src/blocks/img/img.jsx

@@ -1,8 +1,18 @@
 import { isEditing } from "../../functions/is-editing.js";
+
 function ImgComponent(props) {
-  return <img style={{
-    "object-fit": props.backgroundSize || "cover",
-    "object-position": props.backgroundPosition || "center"
-  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc || props.image} {...props.attributes} />;
+  return (
+    <img
+      style={{
+        "object-fit": props.backgroundSize || "cover",
+        "object-position": props.backgroundPosition || "center",
+      }}
+      key={(isEditing() && props.imgSrc) || "default-key"}
+      alt={props.altText}
+      src={props.imgSrc || props.image}
+      {...props.attributes}
+    />
+  );
 }
-export default ImgComponent;
+
+export default ImgComponent;

package/src/blocks/input/input.jsx

@@ -1,5 +1,20 @@
 import { isEditing } from "../../functions/is-editing.js";
+
 function FormInputComponent(props) {
-  return <input {...props.attributes} key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"} placeholder={props.placeholder} type={props.type} name={props.name} value={props.value} defaultValue={props.defaultValue} required={props.required} />;
+  return (
+    <input
+      {...props.attributes}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      placeholder={props.placeholder}
+      type={props.type}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+      required={props.required}
+    />
+  );
 }
-export default FormInputComponent;
+
+export default FormInputComponent;

package/src/blocks/raw-text/raw-text.jsx

@@ -1,4 +1,10 @@
 function RawText(props) {
-  return <span class={props.attributes?.class || props.attributes?.className} innerHTML={props.text || ""}></span>;
+  return (
+    <span
+      class={props.attributes?.class || props.attributes?.className}
+      innerHTML={props.text || ""}
+    ></span>
+  );
 }
-export default RawText;
+
+export default RawText;

package/src/blocks/section/section.jsx

@@ -1,17 +1,27 @@
 function SectionComponent(props) {
-  return <section {...props.attributes} style={{
-    width: "100%",
-    "align-self": "stretch",
-    "flex-grow": "1",
-    "box-sizing": "border-box",
-    "max-width": `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
-    display: "flex",
-    "flex-direction": "column",
-    "align-items": "stretch",
-    "margin-left": "auto",
-    "margin-right": "auto"
-  }}>
+  return (
+    <section
+      {...props.attributes}
+      style={{
+        width: "100%",
+        "align-self": "stretch",
+        "flex-grow": "1",
+        "box-sizing": "border-box",
+        "max-width": `${
+          props.maxWidth && typeof props.maxWidth === "number"
+            ? props.maxWidth
+            : 1200
+        }px`,
+        display: "flex",
+        "flex-direction": "column",
+        "align-items": "stretch",
+        "margin-left": "auto",
+        "margin-right": "auto",
+      }}
+    >
       {props.children}
-    </section>;
+    </section>
+  );
 }
-export default SectionComponent;
+
+export default SectionComponent;