@builder.io/sdk-solid 0.0.16 → 0.0.17

package/src/blocks/form/form.jsx

@@ -1,250 +1,249 @@
-import { Show, For } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { useContext, Show, For, createSignal } from "solid-js";
 import { css } from "solid-styled-components";
-import RenderBlock from "../../components/render-block/render-block.js";
+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 state = createMutable({
-    formState: "unsubmitted",
-    responseData: null,
-    formErrorMessage: "",
+  const [formState, setFormState] = createSignal("unsubmitted");
+  const [responseData, setResponseData] = createSignal(null);
+  const [formErrorMessage, setFormErrorMessage] = createSignal("");
 
-    get submissionState() {
-      return isEditing() && props.previewState || state.formState;
-    },
+  function submissionState() {
+    return isEditing() && props.previewState || formState();
+  }
 
-    onSubmit(event) {
-      const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
+  function onSubmit(event) {
+    const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
 
-      if (props.sendSubmissionsTo === "zapier") {
+    if (props.sendSubmissionsTo === "zapier") {
+      event.preventDefault();
+    } else if (sendWithJs) {
+      if (!(props.action || props.sendSubmissionsTo === "email")) {
         event.preventDefault();
-      } else if (sendWithJs) {
-        if (!(props.action || props.sendSubmissionsTo === "email")) {
-          event.preventDefault();
-          return;
-        }
+        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;
+      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;
+            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;
+        return {
+          key,
+          value
+        };
+      });
+      let contentType = props.contentType;
 
-        if (props.sendSubmissionsTo === "email") {
+      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
+          value,
+          key
         }) => {
-          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?
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
+      }
 
-        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;
         }
+      }
 
-        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
         }
+      });
 
-        const presubmitEvent = new CustomEvent("presubmit", {
-          detail: {
-            body
-          }
-        });
-
-        if (formRef) {
-          formRef.dispatchEvent(presubmitEvent);
+      if (formRef) {
+        formRef.dispatchEvent(presubmitEvent);
 
-          if (presubmitEvent.defaultPrevented) {
-            return;
-          }
+        if (presubmitEvent.defaultPrevented) {
+          return;
         }
+      }
 
-        state.formState = "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();
-          }
+      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 (!res.ok && props.errorMessagePath) {
-            /* TODO: allow supplying an error formatter function */
-            let message = get(body, props.errorMessagePath);
+        if (contentType && contentType.indexOf("application/json") !== -1) {
+          body = await res.json();
+        } else {
+          body = await res.text();
+        }
 
-            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 && props.errorMessagePath) {
+          /* TODO: allow supplying an error formatter function */
+          let message = get(body, props.errorMessagePath);
 
-              state.formErrorMessage = message;
+          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);
           }
+        }
 
-          state.responseData = body;
-          state.formState = res.ok ? "success" : "error";
+        setResponseData(body);
+        setFormState(res.ok ? "success" : "error");
 
-          if (res.ok) {
-            const submitSuccessEvent = new CustomEvent("submit:success", {
-              detail: {
-                res,
-                body
-              }
-            });
+        if (res.ok) {
+          const submitSuccessEvent = new CustomEvent("submit:success", {
+            detail: {
+              res,
+              body
+            }
+          });
 
-            if (formRef) {
-              formRef.dispatchEvent(submitSuccessEvent);
+          if (formRef) {
+            formRef.dispatchEvent(submitSuccessEvent);
 
-              if (submitSuccessEvent.defaultPrevented) {
-                return;
-              }
-              /* TODO: option to turn this on/off? */
+            if (submitSuccessEvent.defaultPrevented) {
+              return;
+            }
+            /* TODO: option to turn this on/off? */
 
 
-              if (props.resetFormOnSubmit !== false) {
-                formRef.reset();
-              }
+            if (props.resetFormOnSubmit !== false) {
+              formRef.reset();
             }
-            /* TODO: client side route event first that can be preventDefaulted */
-
+          }
+          /* 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;
+          if (props.successUrl) {
+            if (formRef) {
+              const event = new CustomEvent("route", {
+                detail: {
+                  url: props.successUrl
                 }
-              } else {
+              });
+              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
-            }
-          });
+        }
+      }, err => {
+        const submitErrorEvent = new CustomEvent("submit:error", {
+          detail: {
+            error: err
+          }
+        });
 
-          if (formRef) {
-            formRef.dispatchEvent(submitErrorEvent);
+        if (formRef) {
+          formRef.dispatchEvent(submitErrorEvent);
 
-            if (submitErrorEvent.defaultPrevented) {
-              return;
-            }
+          if (submitErrorEvent.defaultPrevented) {
+            return;
           }
+        }
 
-          state.responseData = err;
-          state.formState = "error";
-        });
-      }
+        setResponseData(err);
+        setFormState("error");
+      });
     }
+  }
 
-  });
-  const formRef = useRef();
-  return <form {...props.attributes} validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={event => state.onSubmit(event)}>
+  let formRef;
+  const builderContext = useContext(BuilderContext);
+  return <form {...props.attributes} validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={event => onSubmit(event)}>
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
           {(block, _index) => {
           const index = _index();
 
-          return <RenderBlock block={block}></RenderBlock>;
+          return <RenderBlock block={block} context={builderContext}></RenderBlock>;
         }}
         </For>
       </Show>
-      <Show when={state.submissionState === "error"}>
+      <Show when={submissionState() === "error"}>
         <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage}></BuilderBlocks>
       </Show>
-      <Show when={state.submissionState === "sending"}>
+      <Show when={submissionState() === "sending"}>
         <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage}></BuilderBlocks>
       </Show>
-      <Show when={state.submissionState === "error" && state.responseData}>
-        <pre class={css({
+      <Show when={submissionState() === "error" && responseData()}>
+        <pre class={"builder-form-error-text " + css({
         padding: "10px",
         color: "red",
         textAlign: "center"
       })}>
-          {JSON.stringify(state.responseData, null, 2)}
+          {JSON.stringify(responseData(), null, 2)}
         </pre>
       </Show>
-      <Show when={state.submissionState === "success"}>
+      <Show when={submissionState() === "success"}>
         <BuilderBlocks dataPath="successMessage" blocks={props.successMessage}></BuilderBlocks>
       </Show>
     </form>;

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util.js";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -18,7 +19,53 @@ const componentInfo = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: "        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          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 * 1000) / 1000;        }        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        // For SVG images - don't render as webp, keep them as SVG        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);              }            }          });        }"
+      onChange: markSerializable((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);
+          }
+        });
+        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",

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

@@ -0,0 +1,48 @@
+function removeProtocol(path) {
+  return path.replace(/http(s)?:/, "");
+}
+function updateQueryParam(uri = "", key, value) {
+  const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+  const separator = uri.indexOf("?") !== -1 ? "&" : "?";
+  if (uri.match(re)) {
+    return uri.replace(re, "$1" + key + "=" + encodeURIComponent(value) + "$2");
+  }
+  return uri + separator + key + "=" + encodeURIComponent(value);
+}
+function getShopifyImageUrl(src, size) {
+  if (!src || !(src == null ? void 0 : src.match(/cdn\.shopify\.com/)) || !size) {
+    return src;
+  }
+  if (size === "master") {
+    return removeProtocol(src);
+  }
+  const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
+  if (match) {
+    const prefix = src.split(match[0]);
+    const suffix = match[3];
+    const useSize = size.match("x") ? size : `${size}x`;
+    return removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
+  }
+  return null;
+}
+function getSrcSet(url) {
+  if (!url) {
+    return url;
+  }
+  const sizes = [100, 200, 400, 800, 1200, 1600, 2e3];
+  if (url.match(/builder\.io/)) {
+    let srcUrl = url;
+    const widthInSrc = Number(url.split("?width=")[1]);
+    if (!isNaN(widthInSrc)) {
+      srcUrl = `${srcUrl} ${widthInSrc}w`;
+    }
+    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 url;
+}
+export {
+  getSrcSet
+};

package/src/blocks/image/image.jsx

@@ -1,11 +1,43 @@
 import { Show } from "solid-js";
 import { css } from "solid-styled-components";
+import { getSrcSet } from "./image.helpers.js";
 
 function Image(props) {
-  return <div class={css({
-    position: "relative"
-  })}>
+  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/))) {
+      return props.srcset;
+    }
+
+    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);
+      }
+    } else if (props.image && !props.srcset) {
+      return getSrcSet(url);
+    }
+
+    return getSrcSet(url);
+  }
+
+  function webpSrcSet() {
+    if (srcSetToUse()?.match(/builder\.io/) && !props.noWebp) {
+      return srcSetToUse().replace(/\?/g, "?format=webp&");
+    } else {
+      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",
@@ -14,27 +46,26 @@ function Image(props) {
         width: "100%",
         top: "0px",
         left: "0px"
-      })} loading="lazy" alt={props.altText} aria-role={props.altText ? "presentation" : undefined} style={{
+      })} loading="lazy" alt={props.altText} role={props.altText ? "presentation" : undefined} style={{
         "object-position": props.backgroundSize || "center",
         "object-fit": props.backgroundSize || "cover"
-      }} src={props.image} srcset={props.srcset} sizes={props.sizes} />
-        <source srcSet={props.srcset} />
+      }} src={props.image} srcset={srcSetToUse()} sizes={props.sizes} />
+        <source srcset={srcSetToUse()} />
       </picture>
-      <Show when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}>
-        <div class={css({
+      <Show when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}>
+        <div class={"builder-image-sizer " + css({
         width: "100%",
         pointerEvents: "none",
         fontSize: "0"
       })} style={{
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         "padding-top": props.aspectRatio * 100 + "%"
-      }}>
-          {" "}
-        </div>
+      }}></div>
       </Show>
       <Show when={props.builderBlock?.children?.length && props.fitContent}>
         {props.children}
       </Show>
-      <Show when={!props.fitContent}>
+      <Show when={!props.fitContent && props.children}>
         <div class={css({
         display: "flex",
         flexDirection: "column",
@@ -48,7 +79,7 @@ function Image(props) {
           {props.children}
         </div>
       </Show>
-    </div>;
+    </>;
 }
 
 export default Image;

package/src/blocks/img/img.jsx

@@ -4,7 +4,7 @@ function ImgComponent(props) {
   return <img {...props.attributes} style={{
     "object-fit": props.backgroundSize || "cover",
     "object-position": props.backgroundPosition || "center"
-  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc} />;
+  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc || props.image} />;
 }
 
 export default ImgComponent;

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

@@ -2,6 +2,7 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
+  builtIn: true,
   inputs: [
     {
       name: "symbol",