@builder.io/sdk-svelte 0.0.1-9 → 0.0.1

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

@@ -1,262 +0,0 @@
-const componentInfo = {
-  name: "Form:Form",
-  builtIn: true,
-  defaults: {
-    responsiveStyles: {
-      large: {
-        marginTop: "15px",
-        paddingBottom: "15px"
-      }
-    }
-  },
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
-  inputs: [
-    {
-      name: "sendSubmissionsTo",
-      type: "string",
-      enum: [
-        {
-          label: "Send to email",
-          value: "email",
-          helperText: "Send form submissions to the email address of your choosing"
-        },
-        {
-          label: "Custom",
-          value: "custom",
-          helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
-        }
-      ],
-      defaultValue: "email"
-    },
-    {
-      name: "sendSubmissionsToEmail",
-      type: "string",
-      required: true,
-      defaultValue: "your@email.com",
-      showIf: 'options.get("sendSubmissionsTo") === "email"'
-    },
-    {
-      name: "sendWithJs",
-      type: "boolean",
-      helperText: "Set to false to use basic html form action",
-      defaultValue: true,
-      showIf: 'options.get("sendSubmissionsTo") === "custom"'
-    },
-    {
-      name: "name",
-      type: "string",
-      defaultValue: "My form"
-    },
-    {
-      name: "action",
-      type: "string",
-      helperText: "URL to send the form data to",
-      showIf: 'options.get("sendSubmissionsTo") === "custom"'
-    },
-    {
-      name: "contentType",
-      type: "string",
-      defaultValue: "application/json",
-      advanced: true,
-      enum: [
-        "application/json",
-        "multipart/form-data",
-        "application/x-www-form-urlencoded"
-      ],
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "method",
-      type: "string",
-      showIf: 'options.get("sendSubmissionsTo") === "custom"',
-      defaultValue: "POST",
-      advanced: true
-    },
-    {
-      name: "previewState",
-      type: "string",
-      enum: ["unsubmitted", "sending", "success", "error"],
-      defaultValue: "unsubmitted",
-      helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "successUrl",
-      type: "url",
-      helperText: "Optional URL to redirect the user to on form submission success",
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "resetFormOnSubmit",
-      type: "boolean",
-      showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
-      advanced: true
-    },
-    {
-      name: "successMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Thanks!</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "validate",
-      type: "boolean",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "errorMessagePath",
-      type: "text",
-      advanced: true,
-      helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
-    },
-    {
-      name: "errorMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          bindings: {
-            "component.options.text": "state.formErrorMessage || block.component.options.text"
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Form submission error :( Please check your answers and try again</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "sendingMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Sending...</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "customHeaders",
-      type: "map",
-      valueType: {
-        type: "string"
-      },
-      advanced: true,
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-    }
-  ],
-  noWrap: true,
-  canHaveChildren: true,
-  defaultChildren: [
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Text",
-        options: {
-          text: "<span>Enter your name</span>"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:Input",
-        options: {
-          name: "name",
-          placeholder: "Jane Doe"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Text",
-        options: {
-          text: "<span>Enter your email</span>"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:Input",
-        options: {
-          name: "email",
-          placeholder: "jane@doe.com"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:SubmitButton",
-        options: {
-          text: "Submit"
-        }
-      }
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/src/blocks/form/form.svelte

@@ -1,333 +0,0 @@
-<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
-
-  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 = 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);
-        }
-
-        formErrorMessage = message;
-      }
-    }
-
-    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 (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 (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}
-
-
-    
-
-{#if submissionState() === 'sending' }
-
-      
-<svelte:component  dataPath="sendingMessage"  blocks={sendingMessage}  this={BuilderBlocks} ></svelte:component>
-
-    
-
-
-{/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>

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

@@ -1,11 +0,0 @@
-const componentInfo = {
-  name: "Fragment",
-  static: true,
-  hidden: true,
-  builtIn: true,
-  canHaveChildren: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};

package/src/blocks/fragment/fragment.svelte

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