@builder.io/sdk-svelte 0.0.1-20 → 0.0.1-23

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.svelte

@@ -1,118 +1,122 @@
 <script>
-    
-    
-    
-    
-  
-  
-  
-
-    
-
-    
-    export let altText;
-export let backgroundSize;
-export let className;
-export let image;
-export let srcset;
-export let sizes;
-export let aspectRatio;
-export let fitContent;
-export let builderBlock;
-
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <div  class="div" >
-    
-<picture >
-      
-<img  loading="lazy"  alt={altText}  role={altText ? 'presentation' : undefined}  style={{
-objectPosition: backgroundSize || 'center',
-objectFit: backgroundSize || 'cover'
-}}  class={'builder-image' + (className ? ' ' + className : '') + 'img'}  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>
+  import { getSrcSet } from "./image.helpers";
+
+  export let image;
+  export let src;
+  export let srcset;
+  export let noWebp;
+  export let altText;
+  export let backgroundSize;
+  export let className;
+  export let sizes;
+  export let aspectRatio;
+  export let fitContent;
+  export let builderBlock;
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+
+  $: srcSetToUse = () => {
+    const imageToUse = image || 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 srcset;
+    }
+
+    if (srcset && image?.includes("builder.io/api/v1/image")) {
+      if (!srcset.includes(image.split("?")[0])) {
+        console.debug("Removed given srcset");
+        return getSrcSet(url);
+      }
+    } else if (image && !srcset) {
+      return getSrcSet(url);
+    }
+
+    return getSrcSet(url);
+  };
+</script>
+
+<div class="div">
+  <picture>
+    {#if srcSetToUse?.()?.match(/builder\.io/) && !noWebp}
+      <source
+        type="image/webp"
+        srcset={srcSetToUse?.()?.replace(/\?/g, "?format=webp&")}
+      />
+    {/if}
+
+    <img
+      use:mitosis_styling={{
+        objectPosition: backgroundSize || "center",
+        objectFit: backgroundSize || "cover",
+      }}
+      loading="lazy"
+      alt={altText}
+      role={altText ? "presentation" : undefined}
+      class={"builder-image" + (className ? " " + className : "") + " img"}
+      src={image}
+      srcset={srcSetToUse()}
+      {sizes}
+    />
+
+    <source srcset={srcSetToUse()} />
+  </picture>
+
+  {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
+    <div
+      use:mitosis_styling={{
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        paddingTop: aspectRatio * 100 + "%",
+      }}
+      class="builder-image-sizer div-2"
+    />
+  {/if}
+
+  {#if builderBlock?.children?.length && fitContent}
+    <slot />
+  {/if}
+
+  {#if !fitContent}
+    <div class="div-3">
+      <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>

package/src/blocks/img/img.svelte

@@ -1,36 +1,26 @@
 <script>
-    
-    
-    
-    
-  import { isEditing } from '../../functions/is-editing.js';
-  
-  
+  import { isEditing } from "../../functions/is-editing.js";
 
-    
+  export let backgroundSize;
+  export let backgroundPosition;
+  export let attributes;
+  export let imgSrc;
+  export let altText;
 
-    
-    export let backgroundSize;
-export let backgroundPosition;
-export let attributes;
-export let imgSrc;
-export let altText;
-    
-    
-    
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
 
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <img {...attributes} style={{
-objectFit: backgroundSize || 'cover',
-objectPosition: backgroundPosition || 'center'
-}}  key={isEditing() && imgSrc || 'default-key'}  alt={altText}  src={imgSrc}  />
+<img
+  {...attributes}
+  use:mitosis_styling={{
+    objectFit: backgroundSize || "cover",
+    objectPosition: backgroundPosition || "center",
+  }}
+  key={(isEditing() && imgSrc) || "default-key"}
+  alt={altText}
+  src={imgSrc}
+/>

package/src/blocks/input/input.svelte

@@ -1,35 +1,22 @@
 <script>
-  
-  
-  
-  
-import { isEditing } from '../../functions/is-editing.js';
+  import { isEditing } from "../../functions/is-editing.js";
 
-
-
-  
-
-  
   export let attributes;
-export let defaultValue;
-export let placeholder;
-export let type;
-export let name;
-export let value;
-export let required;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let defaultValue;
+  export let placeholder;
+  export let type;
+  export let name;
+  export let value;
+  export let required;
 </script>
 
-<input {...attributes} key={isEditing() && defaultValue ? defaultValue : 'default-key'}  placeholder={placeholder}  type={type}  name={name}  value={value}  defaultValue={defaultValue}  required={required}  />
+<input
+  {...attributes}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {placeholder}
+  {type}
+  {name}
+  {value}
+  {defaultValue}
+  {required}
+/>

package/src/blocks/raw-text/raw-text.svelte

@@ -1,30 +1,8 @@
 <script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
   export let attributes;
-export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let text;
 </script>
 
-<span  class={attributes?.class || attributes?.className} >{@html text || ''}</span>
+<span class={attributes?.class || attributes?.className}
+  >{@html text || ""}</span
+>

package/src/blocks/section/section.svelte

@@ -1,37 +1,21 @@
 <script>
-    
-    
-    
-    
-  
-  
-  
-
-    
-
-    
-    export let attributes;
-export let maxWidth;
-
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <section {...attributes} style={maxWidth && typeof maxWidth === 'number' ? {
-maxWidth: maxWidth
-} : undefined} >
-    
-<slot></slot>
-
-  </section>
+  export let attributes;
+  export let maxWidth;
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
+
+<section
+  {...attributes}
+  use:mitosis_styling={maxWidth && typeof maxWidth === "number"
+    ? {
+        maxWidth: maxWidth,
+      }
+    : undefined}
+>
+  <slot />
+</section>

package/src/blocks/select/select.svelte

@@ -1,41 +1,21 @@
 <script>
-  
-  
-  
-  
-import { isEditing } from '../../functions/is-editing.js';
+  import { isEditing } from "../../functions/is-editing.js";
 
-
-
-  
-
-  
   export let attributes;
-export let value;
-export let defaultValue;
-export let name;
-export let options;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let value;
+  export let defaultValue;
+  export let name;
+  export let options;
 </script>
 
-<select {...attributes} value={value}  key={isEditing() && defaultValue ? defaultValue : 'default-key'}  defaultValue={defaultValue}  name={name} >
-  
-
-{#each options as option, index }
-<option  value={option.value} >{option.name || option.value}</option>
-{/each}
-
-
-</select>
+<select
+  {...attributes}
+  {value}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {defaultValue}
+  {name}
+>
+  {#each options as option, undefined}
+    <option value={option.value}>{option.name || option.value}</option>
+  {/each}
+</select>

package/src/blocks/submit-button/submit-button.svelte

@@ -1,34 +1,8 @@
 <script>
-  
-  
-  
-  
-
-
-
-
-  
-
-  
   export let attributes;
-export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
-
-  
+  export let text;
 </script>
 
-<button {...attributes} type="submit" >
-  
-{text}
-
-</button>
+<button {...attributes} type="submit">
+  {text}
+</button>