@builder.io/sdk-react 0.1.2 → 0.1.3

package/src/blocks/form/form.jsx

@@ -1,55 +1,22 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
-import RenderBlock from "../../components/render-block/render-block.jsx";
-import BuilderBlocks from "../../components/render-blocks.jsx";
+import RenderBlock from "../../components/render-block/render-block.js";
+import BuilderBlocks from "../../components/render-blocks.js";
 import { isEditing } from "../../functions/is-editing.js";
-function FormComponent(props) {
-  var _a, _b;
+
+export default function FormComponent(props) {
   const formRef = useRef(null);
   const [formState, setFormState] = useState(() => "unsubmitted");
+
   const [responseData, setResponseData] = useState(() => null);
+
   const [formErrorMessage, setFormErrorMessage] = useState(() => "");
+
   function submissionState() {
-    return isEditing() && props.previewState || formState;
+    return (isEditing() && props.previewState) || formState;
   }
+
   function onSubmit(event) {
-    var _a2;
     const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
     if (props.sendSubmissionsTo === "zapier") {
       event.preventDefault();
@@ -63,50 +30,66 @@ function FormComponent(props) {
       const headers = props.customHeaders || {};
       let body;
       const formData = new FormData(el);
-      const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
-        let value;
-        const key = el2.name;
-        if (el2 instanceof HTMLInputElement) {
-          if (el2.type === "radio") {
-            if (el2.checked) {
-              value = el2.name;
-              return {
-                key,
-                value
-              };
-            }
-          } else if (el2.type === "checkbox") {
-            value = el2.checked;
-          } else if (el2.type === "number" || el2.type === "range") {
-            const num = el2.valueAsNumber;
-            if (!isNaN(num)) {
-              value = num;
+
+      // 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;
+              }
+            } else if (el.type === "file") {
+              // TODO: one vs multiple files
+              value = el.files;
+            } else {
+              value = el.value;
             }
-          } else if (el2.type === "file") {
-            value = el2.files;
           } else {
-            value = el2.value;
+            value = el.value;
           }
-        } else {
-          value = el2.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) {
+        if (
+          value instanceof File ||
+          (Array.isArray(value) && value[0] instanceof File) ||
+          value instanceof FileList
+        ) {
           contentType = "multipart/form-data";
         }
       });
+
+      // TODO: send as urlEncoded or multipart by default
+      // because of ease of use and reliability in browser API
+      // for encoding the form?
       if (contentType !== "application/json") {
         body = formData;
       } else {
+        // Json
         const json = {};
         Array.from(formPairs).forEach(({ value, key }) => {
           set(json, key, value);
@@ -114,7 +97,11 @@ function FormComponent(props) {
         body = JSON.stringify(json);
       }
       if (contentType && contentType !== "multipart/form-data") {
-        if (!(sendWithJs && ((_a2 = props.action) == null ? void 0 : _a2.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;
         }
       }
@@ -126,92 +113,141 @@ 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, { body, headers, method: props.method || "post" }).then((res) => __async(this, null, function* () {
-        let body2;
-        const contentType2 = res.headers.get("content-type");
-        if (contentType2 && contentType2.indexOf("application/json") !== -1) {
-          body2 = yield res.json();
-        } else {
-          body2 = yield res.text();
-        }
-        if (!res.ok && props.errorMessagePath) {
-          let message = get(body2, props.errorMessagePath);
-          if (message) {
-            if (typeof message !== "string") {
-              message = JSON.stringify(message);
-            }
-            setFormErrorMessage(message);
+      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();
           }
-        }
-        setResponseData(body2);
-        setFormState(res.ok ? "success" : "error");
-        if (res.ok) {
-          const submitSuccessEvent = new CustomEvent("submit:success", {
-            detail: { res, body: body2 }
-          });
-          if (formRef.current) {
-            formRef.current.dispatchEvent(submitSuccessEvent);
-            if (submitSuccessEvent.defaultPrevented) {
-              return;
-            }
-            if (props.resetFormOnSubmit !== false) {
-              formRef.current.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);
             }
           }
-          if (props.successUrl) {
+          setResponseData(body);
+          setFormState(res.ok ? "success" : "error");
+          if (res.ok) {
+            const submitSuccessEvent = new CustomEvent("submit:success", {
+              detail: { res, body },
+            });
             if (formRef.current) {
-              const event2 = new CustomEvent("route", {
-                detail: { url: props.successUrl }
-              });
-              formRef.current.dispatchEvent(event2);
-              if (!event2.defaultPrevented) {
+              formRef.current.dispatchEvent(submitSuccessEvent);
+              if (submitSuccessEvent.defaultPrevented) {
+                return;
+              }
+              /* TODO: option to turn this on/off? */ if (
+                props.resetFormOnSubmit !== false
+              ) {
+                formRef.current.reset();
+              }
+            }
+            /* TODO: client side route event first that can be preventDefaulted */ if (
+              props.successUrl
+            ) {
+              if (formRef.current) {
+                const event = new CustomEvent("route", {
+                  detail: { url: props.successUrl },
+                });
+                formRef.current.dispatchEvent(event);
+                if (!event.defaultPrevented) {
+                  location.href = props.successUrl;
+                }
+              } else {
                 location.href = props.successUrl;
               }
-            } else {
-              location.href = props.successUrl;
             }
           }
-        }
-      }), (err) => {
-        const submitErrorEvent = new CustomEvent("submit:error", {
-          detail: { error: err }
-        });
-        if (formRef.current) {
-          formRef.current.dispatchEvent(submitErrorEvent);
-          if (submitErrorEvent.defaultPrevented) {
-            return;
+        },
+        (err) => {
+          const submitErrorEvent = new CustomEvent("submit:error", {
+            detail: { error: err },
+          });
+          if (formRef.current) {
+            formRef.current.dispatchEvent(submitErrorEvent);
+            if (submitErrorEvent.defaultPrevented) {
+              return;
+            }
           }
+          setResponseData(err);
+          setFormState("error");
         }
-        setResponseData(err);
-        setFormState("error");
-      });
+      );
     }
   }
   const builderContext = useContext(BuilderContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("form", __spreadValues({
-    validate: props.validate,
-    ref: formRef,
-    action: !props.sendWithJs && props.action,
-    method: props.method,
-    name: props.name,
-    onSubmit: (event) => onSubmit(event)
-  }, props.attributes), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
-    block,
-    context: builderContext
-  }))) : null, " ", submissionState() === "error" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
-    dataPath: "errorMessage",
-    blocks: props.errorMessage
-  })) : null, " ", submissionState() === "sending" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
-    dataPath: "sendingMessage",
-    blocks: props.sendingMessage
-  })) : null, " ", submissionState() === "error" && responseData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("pre", {
-    className: "builder-form-error-text pre-bdd3175a"
-  }, " ", JSON.stringify(responseData, null, 2), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
-    dataPath: "successMessage",
-    blocks: props.successMessage
-  })) : null, " "), " ", /* @__PURE__ */ React.createElement("style", null, `.pre-bdd3175a {  padding: 10px; color: red; text-align: center; }`), " ");
+  return (
+    <>
+      {" "}
+      <form
+        validate={props.validate}
+        ref={formRef}
+        action={!props.sendWithJs && props.action}
+        method={props.method}
+        name={props.name}
+        onSubmit={(event) => onSubmit(event)}
+        {...props.attributes}
+      >
+        {" "}
+        {props.builderBlock && props.builderBlock.children ? (
+          <>
+            {props.builderBlock?.children?.map((block) => (
+              <RenderBlock block={block} context={builderContext} />
+            ))}
+          </>
+        ) : null}{" "}
+        {submissionState() === "error" ? (
+          <>
+            <BuilderBlocks
+              dataPath="errorMessage"
+              blocks={props.errorMessage}
+            />
+          </>
+        ) : null}{" "}
+        {submissionState() === "sending" ? (
+          <>
+            <BuilderBlocks
+              dataPath="sendingMessage"
+              blocks={props.sendingMessage}
+            />
+          </>
+        ) : null}{" "}
+        {submissionState() === "error" && responseData ? (
+          <>
+            <pre className="builder-form-error-text pre-4bdc7532">
+              {" "}
+              {JSON.stringify(responseData, null, 2)}{" "}
+            </pre>
+          </>
+        ) : null}{" "}
+        {submissionState() === "success" ? (
+          <>
+            <BuilderBlocks
+              dataPath="successMessage"
+              blocks={props.successMessage}
+            />
+          </>
+        ) : null}{" "}
+      </form>{" "}
+      <style>{`.pre-4bdc7532 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
+    </>
+  );
 }
-export {
-  FormComponent as default
-};

package/src/blocks/fragment/fragment.jsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-function FragmentComponent(props) {
-  return /* @__PURE__ */ React.createElement("span", null, props.children);
+
+export default function FragmentComponent(props) {
+  return <span>{props.children}</span>;
 }
-export {
-  FragmentComponent as default
-};

package/src/blocks/image/image.jsx

@@ -1,31 +1,19 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import * as React from "react";
 import { getSrcSet } from "./image.helpers.js";
-function Image(props) {
-  var _a, _b, _c, _d;
+
+export default function Image(props) {
   function srcSetToUse() {
-    var _a2;
     const imageToUse = props.image || props.src;
     const url = imageToUse;
-    if (!url || !(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 && ((_a2 = props.image) == null ? void 0 : _a2.includes("builder.io/api/v1/image"))) {
+    if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
       if (!props.srcset.includes(props.image.split("?")[0])) {
         console.debug("Removed given srcset");
         return getSrcSet(url);
@@ -35,55 +23,91 @@ function Image(props) {
     }
     return getSrcSet(url);
   }
+
   function webpSrcSet() {
-    var _a2;
-    if (((_a2 = srcSetToUse == null ? void 0 : srcSetToUse()) == null ? void 0 : _a2.match(/builder\.io/)) && !props.noWebp) {
+    if (srcSetToUse?.()?.match(/builder\.io/) && !props.noWebp) {
       return srcSetToUse().replace(/\?/g, "?format=webp&");
     } else {
       return "";
     }
   }
+
   function aspectRatioCss() {
     const aspectRatioStyles = {
       position: "absolute",
       height: "100%",
       width: "100%",
       left: "0px",
-      top: "0px"
+      top: "0px",
     };
-    const out = props.aspectRatio ? aspectRatioStyles : void 0;
+    const out = props.aspectRatio ? aspectRatioStyles : undefined;
     return out;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("picture", null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
-    type: "image/webp",
-    srcSet: webpSrcSet()
-  })) : null, /* @__PURE__ */ React.createElement("img", {
-    loading: "lazy",
-    alt: props.altText,
-    role: props.altText ? "presentation" : void 0,
-    style: __spreadValues({
-      objectPosition: props.backgroundPosition || "center",
-      objectFit: props.backgroundSize || "cover"
-    }, aspectRatioCss()),
-    className: "builder-image" + (props.className ? " " + props.className : "") + " img-35d6dc22",
-    src: props.image,
-    srcSet: srcSetToUse(),
-    sizes: props.sizes
-  }), /* @__PURE__ */ React.createElement("source", {
-    srcSet: srcSetToUse()
-  })), props.aspectRatio && !(((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length) && props.fitContent) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-image-sizer div-35d6dc22",
-    style: {
-      paddingTop: props.aspectRatio * 100 + "%"
-    }
-  })) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent && props.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div-35d6dc22-2"
-  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.img-35d6dc22 { 
+
+  return (
+    <>
+      <>
+        <picture>
+          {webpSrcSet() ? (
+            <>
+              <source type="image/webp" srcSet={webpSrcSet()} />
+            </>
+          ) : null}
+
+          <img
+            loading="lazy"
+            alt={props.altText}
+            role={props.altText ? "presentation" : undefined}
+            style={{
+              objectPosition: props.backgroundPosition || "center",
+              objectFit: props.backgroundSize || "cover",
+              ...aspectRatioCss(),
+            }}
+            className={
+              "builder-image" +
+              (props.className ? " " + props.className : "") +
+              " img-35d6dc22"
+            }
+            src={props.image}
+            srcSet={srcSetToUse()}
+            sizes={props.sizes}
+          />
+
+          <source srcSet={srcSetToUse()} />
+        </picture>
+
+        {props.aspectRatio &&
+        !(props.builderBlock?.children?.length && props.fitContent) ? (
+          <>
+            <div
+              className="builder-image-sizer div-35d6dc22"
+              style={{
+                paddingTop:
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                  props.aspectRatio * 100 + "%",
+              }}
+            />
+          </>
+        ) : null}
+
+        {props.builderBlock?.children?.length && props.fitContent ? (
+          <>{props.children}</>
+        ) : null}
+
+        {!props.fitContent && props.children ? (
+          <>
+            <div className="div-35d6dc22-2">{props.children}</div>
+          </>
+        ) : null}
+      </>
+      <style>{`.img-35d6dc22 {
 opacity: 1;
-transition: opacity 0.2s ease-in-out; }.div-35d6dc22 { 
+transition: opacity 0.2s ease-in-out;
+}.div-35d6dc22 {
 width: 100%;
 pointer-events: none;
-font-size: 0; }.div-35d6dc22-2 { 
+font-size: 0;
+}.div-35d6dc22-2 {
 display: flex;
 flex-direction: column;
 align-items: stretch;
@@ -91,8 +115,8 @@ position: absolute;
 top: 0;
 left: 0;
 width: 100%;
-height: 100%; }`));
+height: 100%;
+}`}</style>
+    </>
+  );
 }
-export {
-  Image as default
-};

package/src/blocks/img/img.jsx

@@ -1,32 +1,17 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
-function ImgComponent(props) {
-  return /* @__PURE__ */ React.createElement("img", __spreadValues({
-    style: {
-      objectFit: props.backgroundSize || "cover",
-      objectPosition: props.backgroundPosition || "center"
-    },
-    key: isEditing() && props.imgSrc || "default-key",
-    alt: props.altText,
-    src: props.imgSrc || props.image
-  }, props.attributes));
+
+export default function ImgComponent(props) {
+  return (
+    <img
+      style={{
+        objectFit: props.backgroundSize || "cover",
+        objectPosition: props.backgroundPosition || "center",
+      }}
+      key={(isEditing() && props.imgSrc) || "default-key"}
+      alt={props.altText}
+      src={props.imgSrc || props.image}
+      {...props.attributes}
+    />
+  );
 }
-export {
-  ImgComponent as default
-};