@builder.io/sdk-solid 0.4.5 → 0.5.1

package/src/blocks/form/form.jsx

@@ -1,272 +1,5 @@
-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();
-  }
-
-  function onSubmit(event) {
-    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-    if (props.sendSubmissionsTo === "zapier") {
-      event.preventDefault();
-    } else if (sendWithJs) {
-      if (!(props.action || props.sendSubmissionsTo === "email")) {
-        event.preventDefault();
-        return;
-      }
-      event.preventDefault();
-      const el = event.currentTarget;
-      const headers = props.customHeaders || {};
-      let body;
-      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;
-              }
-            } else if (el.type === "file") {
-              // TODO: one vs multiple files
-              value = el.files;
-            } else {
-              value = el.value;
-            }
-          } else {
-            value = el.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
-        ) {
-          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);
-        });
-        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"))
-        ) {
-          headers["content-type"] = contentType;
-        }
-      }
-      const presubmitEvent = new CustomEvent("presubmit", {
-        detail: {
-          body,
-        },
-      });
-      if (formRef) {
-        formRef.dispatchEvent(presubmitEvent);
-        if (presubmitEvent.defaultPrevented) {
-          return;
-        }
-      }
-      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();
-          }
-          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);
-            }
-          }
-          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();
-              }
-            }
-
-            /* 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;
-                }
-              } else {
-                location.href = props.successUrl;
-              }
-            }
-          }
-        },
-        (err) => {
-          const submitErrorEvent = new CustomEvent("submit:error", {
-            detail: {
-              error: err,
-            },
-          });
-          if (formRef) {
-            formRef.dispatchEvent(submitErrorEvent);
-            if (submitErrorEvent.defaultPrevented) {
-              return;
-            }
-          }
-          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}
-    >
-      <Show when={props.builderBlock && props.builderBlock.children}>
-        <For each={props.builderBlock?.children}>
-          {(block, _index) => {
-            const index = _index();
-            return (
-              <RenderBlock block={block} context={builderContext}></RenderBlock>
-            );
-          }}
-        </For>
-      </Show>
-      <Show when={submissionState() === "error"}>
-        <BuilderBlocks
-          dataPath="errorMessage"
-          blocks={props.errorMessage}
-        ></BuilderBlocks>
-      </Show>
-      <Show when={submissionState() === "sending"}>
-        <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",
-            })
-          }
-        >
-          {JSON.stringify(responseData(), null, 2)}
-        </pre>
-      </Show>
-      <Show when={submissionState() === "success"}>
-        <BuilderBlocks
-          dataPath="successMessage"
-          blocks={props.successMessage}
-        ></BuilderBlocks>
-      </Show>
-    </form>
-  );
+  return <></>;
 }
 
 export default FormComponent;

package/src/blocks/fragment/component-info.js

@@ -5,6 +5,4 @@ const componentInfo = {
   canHaveChildren: true,
   noWrap: true
 };
-export {
-  componentInfo
-};
+export { componentInfo }

package/src/blocks/helpers.js

@@ -0,0 +1,27 @@
+function filterAttrs(attrs = {}, prefix, isEvent) {
+  const result = {};
+  for (const attr in attrs) {
+    if (!attrs[attr]) continue;
+    if (isEvent && !attr.startsWith(prefix)) continue;
+    const eventName = isEvent ? attr.replace(prefix, "") : attr;
+    result[eventName] = attrs[attr];
+  }
+  return result;
+}
+function setAttrs(node, attrs = {}) {
+  const attrKeys = Object.keys(attrs);
+  const setup = attr => node.addEventListener(attr, attrs[attr]);
+  const teardown = attr => node.removeEventListener(attr, attrs[attr]);
+  attrKeys.forEach(setup);
+  return {
+    update(attrs2 = {}) {
+      const attrKeys2 = Object.keys(attrs2);
+      attrKeys2.forEach(teardown);
+      attrKeys2.forEach(setup);
+    },
+    destroy() {
+      attrKeys.forEach(teardown);
+    }
+  };
+}
+export { filterAttrs, setAttrs }

package/src/blocks/image/component-info.js

@@ -1,4 +1,3 @@
-import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -10,141 +9,114 @@ const componentInfo = {
     overflow: "hidden"
   },
   canHaveChildren: true,
-  inputs: [
-    {
-      name: "image",
-      type: "file",
-      bubble: true,
-      allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
-      required: true,
-      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
-      onChange: serializeFn((options) => {
-        const DEFAULT_ASPECT_RATIO = 0.7041;
-        options.delete("srcset");
-        options.delete("noWebp");
-        function loadImage(url, timeout = 6e4) {
-          return new Promise((resolve, reject) => {
-            const img = document.createElement("img");
-            let loaded = false;
-            img.onload = () => {
-              loaded = true;
-              resolve(img);
-            };
-            img.addEventListener("error", (event) => {
-              console.warn("Image load failed", event.error);
-              reject(event.error);
-            });
-            img.src = url;
-            setTimeout(() => {
-              if (!loaded) {
-                reject(new Error("Image load timed out"));
-              }
-            }, timeout);
+  inputs: [{
+    name: "image",
+    type: "file",
+    bubble: true,
+    allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+    required: true,
+    defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
+    onChange: options => {
+      const DEFAULT_ASPECT_RATIO = 0.7041;
+      options.delete("srcset");
+      options.delete("noWebp");
+      function loadImage(url, timeout = 6e4) {
+        return new Promise((resolve, reject) => {
+          const img = document.createElement("img");
+          let loaded = false;
+          img.onload = () => {
+            loaded = true;
+            resolve(img);
+          };
+          img.addEventListener("error", event => {
+            console.warn("Image load failed", event.error);
+            reject(event.error);
           });
+          img.src = url;
+          setTimeout(() => {
+            if (!loaded) {
+              reject(new Error("Image load timed out"));
+            }
+          }, timeout);
+        });
+      }
+      function round(num) {
+        return Math.round(num * 1e3) / 1e3;
+      }
+      const value = options.get("image");
+      const aspectRatio = options.get("aspectRatio");
+      fetch(value).then(res => res.blob()).then(blob => {
+        if (blob.type.includes("svg")) {
+          options.set("noWebp", true);
         }
-        function round(num) {
-          return Math.round(num * 1e3) / 1e3;
-        }
-        const value = options.get("image");
-        const aspectRatio = options.get("aspectRatio");
-        fetch(value).then((res) => res.blob()).then((blob) => {
-          if (blob.type.includes("svg")) {
-            options.set("noWebp", true);
+      });
+      if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
+        return loadImage(value).then(img => {
+          const possiblyUpdatedAspectRatio = options.get("aspectRatio");
+          if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
+            if (img.width && img.height) {
+              options.set("aspectRatio", round(img.height / img.width));
+              options.set("height", img.height);
+              options.set("width", img.width);
+            }
           }
         });
-        if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
-          return loadImage(value).then((img) => {
-            const possiblyUpdatedAspectRatio = options.get("aspectRatio");
-            if (options.get("image") === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
-              if (img.width && img.height) {
-                options.set("aspectRatio", round(img.height / img.width));
-                options.set("height", img.height);
-                options.set("width", img.width);
-              }
-            }
-          });
-        }
-      })
-    },
-    {
-      name: "backgroundSize",
-      type: "text",
-      defaultValue: "cover",
-      enum: [
-        {
-          label: "contain",
-          value: "contain",
-          helperText: "The image should never get cropped"
-        },
-        {
-          label: "cover",
-          value: "cover",
-          helperText: "The image should fill it's box, cropping when needed"
-        }
-      ]
-    },
-    {
-      name: "backgroundPosition",
-      type: "text",
-      defaultValue: "center",
-      enum: [
-        "center",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        "top left",
-        "top right",
-        "bottom left",
-        "bottom right"
-      ]
-    },
-    {
-      name: "altText",
-      type: "string",
-      helperText: "Text to display when the user has images off"
-    },
-    {
-      name: "height",
-      type: "number",
-      hideFromUI: true
-    },
-    {
-      name: "width",
-      type: "number",
-      hideFromUI: true
-    },
-    {
-      name: "sizes",
-      type: "string",
-      hideFromUI: true
-    },
-    {
-      name: "srcset",
-      type: "string",
-      hideFromUI: true
-    },
-    {
-      name: "lazy",
-      type: "boolean",
-      defaultValue: true,
-      hideFromUI: true
-    },
-    {
-      name: "fitContent",
-      type: "boolean",
-      helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
-      defaultValue: true
-    },
-    {
-      name: "aspectRatio",
-      type: "number",
-      helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
-      advanced: true,
-      defaultValue: 0.7041
+      }
     }
-  ]
-};
-export {
-  componentInfo
+  }, {
+    name: "backgroundSize",
+    type: "text",
+    defaultValue: "cover",
+    enum: [{
+      label: "contain",
+      value: "contain",
+      helperText: "The image should never get cropped"
+    }, {
+      label: "cover",
+      value: "cover",
+      helperText: "The image should fill it's box, cropping when needed"
+    }]
+  }, {
+    name: "backgroundPosition",
+    type: "text",
+    defaultValue: "center",
+    enum: ["center", "top", "left", "right", "bottom", "top left", "top right", "bottom left", "bottom right"]
+  }, {
+    name: "altText",
+    type: "string",
+    helperText: "Text to display when the user has images off"
+  }, {
+    name: "height",
+    type: "number",
+    hideFromUI: true
+  }, {
+    name: "width",
+    type: "number",
+    hideFromUI: true
+  }, {
+    name: "sizes",
+    type: "string",
+    hideFromUI: true
+  }, {
+    name: "srcset",
+    type: "string",
+    hideFromUI: true
+  }, {
+    name: "lazy",
+    type: "boolean",
+    defaultValue: true,
+    hideFromUI: true
+  }, {
+    name: "fitContent",
+    type: "boolean",
+    helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
+    defaultValue: true
+  }, {
+    name: "aspectRatio",
+    type: "number",
+    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+    advanced: true,
+    defaultValue: 0.7041
+  }]
 };
+export { componentInfo }

package/src/blocks/image/image.helpers.js

@@ -36,13 +36,11 @@ function getSrcSet(url) {
     if (!isNaN(widthInSrc)) {
       srcUrl = `${srcUrl} ${widthInSrc}w`;
     }
-    return sizes.filter((size) => size !== widthInSrc).map((size) => `${updateQueryParam(url, "width", size)} ${size}w`).concat([srcUrl]).join(", ");
+    return sizes.filter(size => size !== widthInSrc).map(size => `${updateQueryParam(url, "width", size)} ${size}w`).concat([srcUrl]).join(", ");
   }
   if (url.match(/cdn\.shopify\.com/)) {
-    return sizes.map((size) => [getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(", ");
+    return sizes.map(size => [getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(", ");
   }
   return url;
 }
-export {
-  getSrcSet
-};
+export { getSrcSet }

package/src/blocks/img/component-info.js

@@ -2,18 +2,14 @@ const componentInfo = {
   name: "Raw:Img",
   hideFromInsertMenu: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
-  inputs: [
-    {
-      name: "image",
-      bubble: true,
-      type: "file",
-      allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
-      required: true
-    }
-  ],
+  inputs: [{
+    name: "image",
+    bubble: true,
+    type: "file",
+    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
+    required: true
+  }],
   noWrap: true,
   static: true
 };
-export {
-  componentInfo
-};
+export { componentInfo }

package/src/blocks/img/img.jsx

@@ -1,4 +1,5 @@
 import { isEditing } from "../../functions/is-editing.js";
+import { filterAttrs } from "../helpers.js";
 
 function ImgComponent(props) {
   return (
@@ -10,6 +11,7 @@ function ImgComponent(props) {
       key={(isEditing() && props.imgSrc) || "default-key"}
       alt={props.altText}
       src={props.imgSrc || props.image}
+      {...{}}
       {...props.attributes}
     />
   );