@builder.io/sdk-svelte 0.0.1-0

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@builder.io/sdk-svelte",
+  "description": "Builder.io SDK for Svelte",
+  "version": "0.0.1-0",
+  "dependencies": {
+    "node-fetch": "^2.6.1"
+  },
+  "main": "src/index.js",
+  "scripts": {
+    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+  }
+}

package/src/blocks/button.svelte

@@ -0,0 +1,38 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  export let attributes;
+export let text;
+export let link;
+export let openLinkInNewTab;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+
+  
+{#if link }
+    
+<a {...attributes} role="button"  href={link}  target={openLinkInNewTab ? '_blank' : undefined} >
+      
+{text}
+
+    </a>
+
+  {/if}

package/src/blocks/columns.svelte

@@ -0,0 +1,95 @@
+<script>
+    
+    
+    
+    
+  import  RenderBlocks,  {  }  from '../components/render-blocks.lite';
+
+  
+
+
+    
+    export let space;
+export let columns;
+export let stackColumnsAt;
+export let reverseColumnsWhenStacked;
+
+    function getGutterSize() {
+return typeof space === 'number' ? space || 0 : 20;
+}
+
+function getColumns() {
+return columns || [];
+}
+
+function getWidth(index) {
+const columns = this.getColumns();
+return columns[index]?.width || 100 / columns.length;
+}
+
+function getColumnCssWidth(index) {
+const columns = this.getColumns();
+const gutterSize = this.getGutterSize();
+const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+}
+
+function maybeApplyForTablet(prop) {
+const stackColumnsAt = stackColumnsAt || 'tablet';
+return stackColumnsAt === 'tablet' ? prop : 'inherit';
+}
+    $: columnsCssVars = () => {
+const flexDir = stackColumnsAt === 'never' ? 'inherit' : reverseColumnsWhenStacked ? 'column-reverse' : 'column';
+return {
+  '--flex-dir': flexDir,
+  '--flex-dir-tablet': this.maybeApplyForTablet(flexDir)
+};
+};
+
+$: columnCssVars = () => {
+const width = '100%';
+const marginLeft = '0';
+return {
+  '--column-width': width,
+  '--column-margin-left': marginLeft,
+  '--column-width-tablet': this.maybeApplyForTablet(width),
+  '--column-margin-left-tablet': this.maybeApplyForTablet(marginLeft)
+};
+};
+
+    
+
+    
+
+    
+
+    
+  </script>
+
+  <div  class="builder-columns div"  style={columnsCssVars()} >
+    
+{#each columns as column }<div  class="builder-column div-2"  style={{
+width: getColumnCssWidth(index),
+marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+...columnCssVars()
+}} >
+          
+<RenderBlocks  blocks={column.blocks} ></RenderBlocks>
+
+        </div>{/each}
+
+  </div>
+
+  <style>
+    .div { 
+display: flex;
+align-items: stretch;
+line-height: normal; }@media (max-width: 999px) { .div { 
+flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div { 
+flex-direction: var(--flex-dir); } }.div-2 { 
+flex-grow: 1; }@media (max-width: 999px) { .div-2 { 
+width: var(--column-width-tablet) !important;
+margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-2 { 
+width: var(--column-width) !important;
+margin-left: var(--column-margin-left) !important; } }
+  </style>

package/src/blocks/custom-code.svelte

@@ -0,0 +1,63 @@
+<script>
+     import { onMount } from 'svelte'
+     
+     
+     
+   
+   
+ 
+
+     
+     export let elem;
+export let replaceNodes;
+export let code;
+
+     function findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem && typeof window !== 'undefined') {
+   /** @type {HTMLScriptElement[]} */
+   const scripts = elem.getElementsByTagName('script');
+
+   for (let i = 0; i < scripts.length; i++) {
+     const script = scripts[i];
+
+     if (script.src) {
+       if (scriptsInserted.includes(script.src)) {
+         continue;
+       }
+
+       scriptsInserted.push(script.src);
+       const newScript = document.createElement('script');
+       newScript.async = true;
+       newScript.src = script.src;
+       document.head.appendChild(newScript);
+     } else if (!script.type || ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
+       if (scriptsRun.includes(script.innerText)) {
+         continue;
+       }
+
+       try {
+         scriptsRun.push(script.innerText);
+         new Function(script.innerText)();
+       } catch (error) {
+         console.warn('`CustomCode`: Error running script:', error);
+       }
+     }
+   }
+ }
+}
+     
+
+     let scriptsInserted = [];
+let scriptsRun = [];
+
+     onMount(() => { 
+ findAndRunScripts();
+});
+
+     
+
+     
+   </script>
+
+   <div  bind:this={elem}  class={'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')} >{@html code}</div>

package/src/blocks/embed.svelte

@@ -0,0 +1,62 @@
+<script>
+     import { onMount } from 'svelte'
+     
+     
+     
+   
+   
+ 
+
+     
+     export let elem;
+export let content;
+
+     function findAndRunScripts() {
+ // TODO: Move this function to standalone one in '@builder.io/utils'
+ if (elem && typeof window !== 'undefined') {
+   /** @type {HTMLScriptElement[]} */
+   const scripts = elem.getElementsByTagName('script');
+
+   for (let i = 0; i < scripts.length; i++) {
+     const script = scripts[i];
+
+     if (script.src) {
+       if (scriptsInserted.includes(script.src)) {
+         continue;
+       }
+
+       scriptsInserted.push(script.src);
+       const newScript = document.createElement('script');
+       newScript.async = true;
+       newScript.src = script.src;
+       document.head.appendChild(newScript);
+     } else if (!script.type || ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
+       if (scriptsRun.includes(script.innerText)) {
+         continue;
+       }
+
+       try {
+         scriptsRun.push(script.innerText);
+         new Function(script.innerText)();
+       } catch (error) {
+         console.warn('`Embed`: Error running script:', error);
+       }
+     }
+   }
+ }
+}
+     
+
+     let scriptsInserted = [];
+let scriptsRun = [];
+
+     onMount(() => { 
+ findAndRunScripts();
+});
+
+     
+
+     
+   </script>
+
+   <div  class="builder-embed"  bind:this={elem} >{@html content}</div>

package/src/blocks/form.svelte

@@ -0,0 +1,300 @@
+<script>
+    
+    
+    
+    
+  import  RenderBlock,  {  }  from '../components/render-block.lite';
+
+  
+
+
+    
+    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;
+    }
+  }
+
+  state = '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;
+    state = 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;
+    state = 'error';
+  });
+}
+}
+    $: submissionState = () => {
+return Builder.isEditing && previewState || state;
+};
+
+    let state = '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 }<RenderBlock  block={block} ></RenderBlock>{/each}
+
+    {/if}
+
+
+    
+{#if submissionState() === 'error' }
+      
+<BuilderBlocks  dataPath="errorMessage"  blocks={errorMessage} ></BuilderBlocks>
+
+    {/if}
+
+
+    
+{#if submissionState() === 'sending' }
+      
+<BuilderBlocks  dataPath="sendingMessage"  blocks={sendingMessage} ></BuilderBlocks>
+
+    {/if}
+
+
+    
+{#if submissionState() === 'error' && responseData }
+      
+<pre  class="builder-form-error-text pre" >
+        
+{JSON.stringify(responseData, null, 2)}
+
+      </pre>
+
+    {/if}
+
+
+    
+{#if submissionState() === 'success' }
+      
+<BuilderBlocks  dataPath="successMessage"  blocks={successMessage} ></BuilderBlocks>
+
+    {/if}
+
+  </form>
+
+  <style>
+    .pre { 
+padding: 10px;
+color: red;
+text-align: center; }
+  </style>

package/src/blocks/fragment.svelte

@@ -0,0 +1,25 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  export let children;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+<span ><slot></slot></span>

package/src/blocks/image.svelte

@@ -0,0 +1,99 @@
+<script>
+    
+    
+    
+    
+  
+  
+
+
+    
+    export let altText;
+export let backgroundSize;
+export let class;
+export let image;
+export let srcset;
+export let sizes;
+export let aspectRatio;
+export let fitContent;
+export let builderBlock;
+export let children;
+
+    
+    
+
+    
+
+    
+
+    
+
+    
+  </script>
+
+  <div  class="div" >
+    
+<picture >
+      
+<img  loading="lazy"  class="img"  alt={altText}  aria-role={altText ? 'presentation' : undefined}  style={{
+objectPosition: backgroundSize || 'center',
+objectFit: backgroundSize || 'cover'
+}}  class={'builder-image' + (class ? ' ' + class : '')}  src={image}  srcset={srcset}  sizes={sizes}  />
+
+      
+<source  srcSet={srcset}  />
+
+    </picture>
+
+    
+{#if aspectRatio && !(fitContent && builderBlock?.children?.length) }<div  class="builder-image-sizer div-2"  style={{
+paddingTop: aspectRatio * 100 + '%'
+}} >
+          
+{' '}
+
+        </div>{/if}
+
+    
+{#if builderBlock?.children?.length && fitContent }
+      
+<slot></slot>
+
+    {/if}
+
+
+    
+{#if !fitContent }
+      
+<div  class="div-3" >
+        
+<slot></slot>
+
+      </div>
+
+    {/if}
+
+  </div>
+
+  <style>
+    .div { 
+position: relative; }.img { 
+opacity: 1;
+transition: opacity 0.2s ease-in-out;
+position: absolute;
+height: 100%;
+width: 100%;
+top: 0px;
+left: 0px; }.div-2 { 
+width: 100%;
+pointer-events: none;
+font-size: 0; }.div-3 { 
+display: flex;
+flex-direction: column;
+align-items: stretch;
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%; }
+  </style>