@builder.io/sdk-svelte 0.0.1-3 → 0.0.1-30

package/src/blocks/form/form.svelte

@@ -1,333 +1,303 @@
 <script>
-    
-    
-    
-    
-  import  RenderBlock,  {  }  from '../../components/render-block/render-block.svelte';
-import  {  isEditing  }  from '../../functions/is-editing.js';
-
-  
-
-    
-
-    
-    export let formRef;
-export let previewState;
-export let sendWithJs;
-export let sendSubmissionsTo;
-export let action;
-export let customHeaders;
-export let contentType;
-export let sendSubmissionsToEmail;
-export let name;
-export let method;
-export let errorMessagePath;
-export let resetFormOnSubmit;
-export let successUrl;
-export let validate;
-export let attributes;
-export let builderBlock;
-export let errorMessage;
-export let sendingMessage;
-export let successMessage;
-    
-    function onSubmit(event) {
-const sendWithJs = sendWithJs || sendSubmissionsTo === 'email';
-
-if (sendSubmissionsTo === 'zapier') {
-  event.preventDefault();
-} else if (sendWithJs) {
-  if (!(action || sendSubmissionsTo === 'email')) {
-    event.preventDefault();
-    return;
-  }
-
-  event.preventDefault();
-  const el = event.currentTarget;
-  const headers = customHeaders || {};
-  let body;
-  const formData = new FormData(el); // TODO: maybe support null
+  import RenderBlock from "../../components/render-block/render-block.svelte";
+  import { isEditing } from "../../functions/is-editing.js";
+
+  export let formRef;
+  export let previewState;
+  export let sendWithJs;
+  export let sendSubmissionsTo;
+  export let action;
+  export let customHeaders;
+  export let contentType;
+  export let sendSubmissionsToEmail;
+  export let name;
+  export let method;
+  export let errorMessagePath;
+  export let resetFormOnSubmit;
+  export let successUrl;
+  export let validate;
+  export let attributes;
+  export let builderBlock;
+  export let errorMessage;
+  export let sendingMessage;
+  export let successMessage;
+
+  const onSubmit = function onSubmit(event) {
+    const sendWithJs = sendWithJs || sendSubmissionsTo === "email";
+
+    if (sendSubmissionsTo === "zapier") {
+      event.preventDefault();
+    } else if (sendWithJs) {
+      if (!(action || sendSubmissionsTo === "email")) {
+        event.preventDefault();
+        return;
+      }
 
-  const formPairs = Array.from(event.currentTarget.querySelectorAll('input,select,textarea')).filter(el => !!el.name).map(el => {
-    let value;
-    const key = el.name;
+      event.preventDefault();
+      const el = event.currentTarget;
+      const headers = 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;
+          }
 
-    if (el instanceof HTMLInputElement) {
-      if (el.type === 'radio') {
-        if (el.checked) {
-          value = el.name;
           return {
             key,
-            value
+            value,
           };
-        }
-      } else if (el.type === 'checkbox') {
-        value = el.checked;
-      } else if (el.type === 'number' || el.type === 'range') {
-        const num = el.valueAsNumber;
+        });
+      let contentType = contentType;
 
-        if (!isNaN(num)) {
-          value = num;
-        }
-      } else if (el.type === 'file') {
-        // TODO: one vs multiple files
-        value = el.files;
-      } else {
-        value = el.value;
+      if (sendSubmissionsTo === "email") {
+        contentType = "multipart/form-data";
       }
-    } else {
-      value = el.value;
-    }
-
-    return {
-      key,
-      value
-    };
-  });
-  let contentType = contentType;
-
-  if (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 && action?.includes('zapier.com'))) {
-      headers['content-type'] = contentType;
-    }
-  }
-
-  const presubmitEvent = new CustomEvent('presubmit', {
-    detail: {
-      body
-    }
-  });
-
-  if (formRef) {
-    formRef.dispatchEvent(presubmitEvent);
-
-    if (presubmitEvent.defaultPrevented) {
-      return;
-    }
-  }
 
-  formState = 'sending';
-  const formUrl = `${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(sendSubmissionsToEmail || '')}&name=${encodeURIComponent(name || '')}`;
-  fetch(sendSubmissionsTo === 'email' ? formUrl : action
-  /* TODO: throw error if no action URL */
-  , {
-    body,
-    headers,
-    method: 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 && errorMessagePath) {
-      /* TODO: allow supplying an error formatter function */
-      let message = get(body, 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);
+      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?
 
-        formErrorMessage = message;
+      if (contentType !== "application/json") {
+        body = formData;
+      } else {
+        // Json
+        const json = {};
+        Array.from(formPairs).forEach(({ value, key }) => {
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
       }
-    }
 
-    responseData = body;
-    formState = res.ok ? 'success' : 'error';
+      if (contentType && contentType !== "multipart/form-data") {
+        if (
+          /* Zapier doesn't allow content-type header to be sent from browsers */
+          !(sendWithJs && action?.includes("zapier.com"))
+        ) {
+          headers["content-type"] = contentType;
+        }
+      }
 
-    if (res.ok) {
-      const submitSuccessEvent = new CustomEvent('submit:success', {
+      const presubmitEvent = new CustomEvent("presubmit", {
         detail: {
-          res,
-          body
-        }
+          body,
+        },
       });
 
       if (formRef) {
-        formRef.dispatchEvent(submitSuccessEvent);
+        formRef.dispatchEvent(presubmitEvent);
 
-        if (submitSuccessEvent.defaultPrevented) {
+        if (presubmitEvent.defaultPrevented) {
           return;
         }
-        /* TODO: option to turn this on/off? */
-
-
-        if (resetFormOnSubmit !== false) {
-          formRef.reset();
-        }
       }
-      /* TODO: client side route event first that can be preventDefaulted */
 
-
-      if (successUrl) {
-        if (formRef) {
-          const event = new CustomEvent('route', {
-            detail: {
-              url: successUrl
-            }
-          });
-          formRef.dispatchEvent(event);
-
-          if (!event.defaultPrevented) {
-            location.href = successUrl;
-          }
-        } else {
-          location.href = successUrl;
+      formState = "sending";
+      const formUrl = `${
+        builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
+      }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
+        sendSubmissionsToEmail || ""
+      )}&name=${encodeURIComponent(name || "")}`;
+      fetch(
+        sendSubmissionsTo === "email" ? formUrl : action,
+        /* TODO: throw error if no action URL */
+        {
+          body,
+          headers,
+          method: method || "post",
         }
-      }
-    }
-  }, err => {
-    const submitErrorEvent = new CustomEvent('submit:error', {
-      detail: {
-        error: err
-      }
-    });
-
-    if (formRef) {
-      formRef.dispatchEvent(submitErrorEvent);
-
-      if (submitErrorEvent.defaultPrevented) {
-        return;
-      }
-    }
-
-    responseData = err;
-    formState = 'error';
-  });
-}
-}
-    $: submissionState = () => {
-return isEditing() && previewState || formState;
-};
-
-    
-    
-    let formState = 'unsubmitted';
-let responseData = null;
-let formErrorMessage = '';
-
-    
-
-    
-
-    
-  </script>
-
-  <form {...attributes} validate={validate}  bind:this={formRef}  action={!sendWithJs && action}  method={method}  name={name}  on:submit="{event => onSubmit(event)}" >
-    
-
-{#if builderBlock && builderBlock.children }
-
-      
-
-{#each builderBlock?.children as block, index }
-<RenderBlock  block={block} ></RenderBlock>
-{/each}
-
-
-    
-
-
-{/if}
-
-
-    
-
-{#if submissionState() === 'error' }
-
-      
-<svelte:component  dataPath="errorMessage"  blocks={errorMessage}  this={BuilderBlocks} ></svelte:component>
-
-    
-
-
-{/if}
+      ).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 && errorMessagePath) {
+            /* TODO: allow supplying an error formatter function */
+            let message = get(body, 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 submissionState() === 'sending' }
+              formErrorMessage = message;
+            }
+          }
 
-      
-<svelte:component  dataPath="sendingMessage"  blocks={sendingMessage}  this={BuilderBlocks} ></svelte:component>
+          responseData = body;
+          formState = res.ok ? "success" : "error";
 
-    
+          if (res.ok) {
+            const submitSuccessEvent = new CustomEvent("submit:success", {
+              detail: {
+                res,
+                body,
+              },
+            });
 
+            if (formRef) {
+              formRef.dispatchEvent(submitSuccessEvent);
 
-{/if}
+              if (submitSuccessEvent.defaultPrevented) {
+                return;
+              }
+              /* TODO: option to turn this on/off? */
 
+              if (resetFormOnSubmit !== false) {
+                formRef.reset();
+              }
+            }
+            /* TODO: client side route event first that can be preventDefaulted */
+
+            if (successUrl) {
+              if (formRef) {
+                const event = new CustomEvent("route", {
+                  detail: {
+                    url: successUrl,
+                  },
+                });
+                formRef.dispatchEvent(event);
+
+                if (!event.defaultPrevented) {
+                  location.href = successUrl;
+                }
+              } else {
+                location.href = successUrl;
+              }
+            }
+          }
+        },
+        (err) => {
+          const submitErrorEvent = new CustomEvent("submit:error", {
+            detail: {
+              error: err,
+            },
+          });
 
-    
+          if (formRef) {
+            formRef.dispatchEvent(submitErrorEvent);
 
-{#if submissionState() === 'error' && responseData }
+            if (submitErrorEvent.defaultPrevented) {
+              return;
+            }
+          }
 
-      
-<pre  class="builder-form-error-text pre" >
+          responseData = err;
+          formState = "error";
+        }
+      );
+    }
+  };
+  $: submissionState = () => {
+    return (isEditing() && previewState) || formState;
+  };
+
+  let formState = "unsubmitted";
+  let responseData = null;
+  let formErrorMessage = "";
+</script>
+
+<form
+  {...attributes}
+  {validate}
+  bind:this={formRef}
+  action={!sendWithJs && action}
+  {method}
+  {name}
+  on:submit={(event) => {
+    onSubmit(event);
+  }}
+>
+  {#if builderBlock && builderBlock.children}
+    {#each builderBlock?.children as block, undefined}
+      <RenderBlock {block} />
+    {/each}
+  {/if}
+
+  {#if submissionState() === "error"}
+    <svelte:component
+      this={BuilderBlocks}
+      dataPath="errorMessage"
+      blocks={errorMessage}
+    />
+  {/if}
+
+  {#if submissionState() === "sending"}
+    <svelte:component
+      this={BuilderBlocks}
+      dataPath="sendingMessage"
+      blocks={sendingMessage}
+    />
+  {/if}
+
+  {#if submissionState() === "error" && responseData}
+    <pre class="builder-form-error-text pre">
         
 {JSON.stringify(responseData, null, 2)}
 
       </pre>
-
-    
-
-
-{/if}
-
-
-    
-
-{#if submissionState() === 'success' }
-
-      
-<svelte:component  dataPath="successMessage"  blocks={successMessage}  this={BuilderBlocks} ></svelte:component>
-
-    
-
-
-{/if}
-
-  </form>
-
-  <style>
-    .pre { 
-padding: 10px;
-color: red;
-text-align: center; }
-  </style>
+  {/if}
+
+  {#if submissionState() === "success"}
+    <svelte:component
+      this={BuilderBlocks}
+      dataPath="successMessage"
+      blocks={successMessage}
+    />
+  {/if}
+</form>
+
+<style>
+  .pre {
+    padding: 10px;
+    color: red;
+    text-align: center;
+  }
+</style>

package/src/blocks/fragment/fragment.svelte

@@ -1,28 +1,4 @@
 <script>
-  
-  
-  
-  
-
-
-
-  
-
-  
-  
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
 </script>
 
-<span ><slot></slot></span>
+<span><slot /></span>

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

@@ -18,7 +18,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(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",