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

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 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.svelte

@@ -1,117 +1,146 @@
-<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   >
-    
-<picture >
-      
-<img  loading="lazy"    alt={altText}  aria-role={altText ? 'presentation' : undefined}  style={{
-objectPosition: backgroundSize || 'center',
-objectFit: backgroundSize || 'cover'
-}}  class={'builder-image' + (className ? ' ' + className : '')}  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>
+<script context="module" lang="ts">
+  export interface ImageProps {
+    className?: string;
+    image: string;
+    sizes?: string;
+    lazy?: boolean;
+    height?: number;
+    width?: number;
+    altText?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    srcset?: string;
+    aspectRatio?: number;
+    children?: JSX.Element;
+    fitContent?: boolean;
+    builderBlock?: BuilderBlock;
+    noWebp?: boolean;
+    src?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { getSrcSet } from "./image.helpers";
+
+  export let image: ImageProps["image"];
+  export let src: ImageProps["src"];
+  export let srcset: ImageProps["srcset"];
+  export let noWebp: ImageProps["noWebp"];
+  export let altText: ImageProps["altText"];
+  export let backgroundSize: ImageProps["backgroundSize"];
+  export let className: ImageProps["className"];
+  export let sizes: ImageProps["sizes"];
+  export let aspectRatio: ImageProps["aspectRatio"];
+  export let fitContent: ImageProps["fitContent"];
+  export let builderBlock: ImageProps["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);
+  };
+
+  $: webpSrcSet = () => {
+    if (srcSetToUse?.()?.match(/builder\.io/) && !noWebp) {
+      return srcSetToUse().replace(/\?/g, "?format=webp&");
+    } else {
+      return "";
+    }
+  };
+</script>
+
+<div class="div">
+  <picture>
+    {#if webpSrcSet()}
+      <source type="image/webp" srcset={webpSrcSet()} />
+    {/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,48 @@
-<script>
-    
-    
-    
-    
-  import  {  isEditing  }  from '../../functions/is-editing.js';
-
-  
-
-    
-
-    
-    export let backgroundSize;
-export let backgroundPosition;
-export let attributes;
-export let imgSrc;
-export let altText;
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <img {...attributes} style={{
-objectFit: backgroundSize || 'cover',
-objectPosition: backgroundPosition || 'center'
-}}  key={isEditing() && imgSrc || 'default-key'}  alt={altText}  src={imgSrc}  />
+<script context="module" lang="ts">
+  export interface ImgProps {
+    attributes?: any;
+    imgSrc?: string; // TODO(misko): I think this is unused
+
+    image?: string;
+    altText?: string;
+    backgroundSize?: "cover" | "contain";
+    backgroundPosition?:
+      | "center"
+      | "top"
+      | "left"
+      | "right"
+      | "bottom"
+      | "top left"
+      | "top right"
+      | "bottom left"
+      | "bottom right";
+  }
+</script>
+
+<script lang="ts">
+  import { isEditing } from "../../functions/is-editing.js";
+
+  export let backgroundSize: ImgProps["backgroundSize"];
+  export let backgroundPosition: ImgProps["backgroundPosition"];
+  export let imgSrc: ImgProps["imgSrc"];
+  export let altText: ImgProps["altText"];
+  export let image: ImgProps["image"];
+  export let attributes: ImgProps["attributes"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars).forEach(([p, v]) => {
+      node.style[p] = v;
+    });
+  }
+</script>
+
+<img
+  {...attributes}
+  use:mitosis_styling={{
+    objectFit: backgroundSize || "cover",
+    objectPosition: backgroundPosition || "center",
+  }}
+  key={(isEditing() && imgSrc) || "default-key"}
+  alt={altText}
+  src={imgSrc || image}
+/>

package/src/blocks/input/input.svelte

@@ -1,35 +1,34 @@
-<script>
-  
-  
-  
-  
-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;
-  
-  
-  
-
-  
-  
-  
-
-  
+<script context="module" lang="ts">
+  export interface FormInputProps {
+    type?: string;
+    attributes?: any;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    required?: boolean;
+  }
+</script>
 
-  
+<script lang="ts">
+  import { isEditing } from "../../functions/is-editing.js";
 
-  
+  export let attributes: FormInputProps["attributes"];
+  export let defaultValue: FormInputProps["defaultValue"];
+  export let placeholder: FormInputProps["placeholder"];
+  export let type: FormInputProps["type"];
+  export let name: FormInputProps["name"];
+  export let value: FormInputProps["value"];
+  export let required: FormInputProps["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,29 +1,15 @@
-<script>
-  
-  
-  
-  
-
-
-
-  
-
-  
-  export let attributes;
-export let text;
-  
-  
-  
-
-  
-  
-  
-
-  
-
-  
+<script context="module" lang="ts">
+  export interface RawTextProps {
+    attributes?: any;
+    text?: string; // builderBlock?: any;
+  }
+</script>
 
-  
+<script lang="ts">
+  export let attributes: RawTextProps["attributes"];
+  export let text: RawTextProps["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,36 +1,30 @@
-<script>
-    
-    
-    
-    
-  
-  
-
-    
-
-    
-    export let attributes;
-export let maxWidth;
-
-    
-    
-    
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <section {...attributes} style={maxWidth && typeof maxWidth === 'number' ? {
-maxWidth: maxWidth
-} : undefined} >
-    
-<slot></slot>
-
-  </section>
+<script context="module" lang="ts">
+  export interface SectionProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+    builderBlock?: any;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: SectionProps["attributes"];
+  export let maxWidth: SectionProps["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>