@builder.io/sdk-svelte 0.4.5 → 0.5.1

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

@@ -1,172 +1,124 @@
-import type { ComponentInfo } from '../../types/components';
-import { serializeFn } from '../util.js';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Image',
   static: true,
-
-  image:
-    'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
   defaultStyles: {
     position: 'relative',
     minHeight: '20px',
     minWidth: '20px',
-    overflow: 'hidden',
+    overflow: 'hidden'
   },
   canHaveChildren: true,
-  inputs: [
-    {
-      name: 'image',
-      type: 'file',
-      bubble: true,
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
-      required: true,
-      defaultValue:
-        'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
-      onChange: serializeFn(
-        (options: Map<string, any>): void | Promise<void> => {
-          const DEFAULT_ASPECT_RATIO = 0.7041;
-          options.delete('srcset');
-          options.delete('noWebp');
-          function loadImage(
-            url: string,
-            timeout = 60000
-          ): Promise<HTMLImageElement> {
-            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);
-              });
+  inputs: [{
+    name: 'image',
+    type: 'file',
+    bubble: true,
+    allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+    required: true,
+    defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
+    onChange: (options: Map<string, any>): void | Promise<void> => {
+      const DEFAULT_ASPECT_RATIO = 0.7041;
+      options.delete('srcset');
+      options.delete('noWebp');
+      function loadImage(url: string, timeout = 60000): Promise<HTMLImageElement> {
+        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: number) {
+        return Math.round(num * 1000) / 1000;
+      }
+      const value = options.get('image');
+      const aspectRatio = options.get('aspectRatio');
 
-              img.src = url;
-              setTimeout(() => {
-                if (!loaded) {
-                  reject(new Error('Image load timed out'));
-                }
-              }, timeout);
-            });
-          }
-
-          function round(num: number) {
-            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);
-                }
-              }
-            });
-          }
+      // 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);
         }
-      ),
-    },
-    {
-      name: 'backgroundSize',
-      type: 'text',
-      defaultValue: 'cover',
-      enum: [
-        {
-          label: 'contain',
-          value: 'contain',
-          helperText: 'The image should never get cropped',
-        },
-        {
-          label: 'cover',
-          value: 'cover',
-          helperText: "The image should fill it's box, cropping when needed",
-        },
-      ],
-    },
-    {
-      name: 'backgroundPosition',
-      type: 'text',
-      defaultValue: 'center',
-      enum: [
-        'center',
-        'top',
-        'left',
-        'right',
-        'bottom',
-        'top left',
-        'top right',
-        'bottom left',
-        'bottom right',
-      ],
-    },
-    {
-      name: 'altText',
-      type: 'string',
-      helperText: 'Text to display when the user has images off',
-    },
-    {
-      name: 'height',
-      type: 'number',
-      hideFromUI: true,
-    },
-    {
-      name: 'width',
-      type: 'number',
-      hideFromUI: true,
-    },
-    {
-      name: 'sizes',
-      type: 'string',
-      hideFromUI: true,
-    },
-    {
-      name: 'srcset',
-      type: 'string',
-      hideFromUI: true,
-    },
-    {
-      name: 'lazy',
-      type: 'boolean',
-      defaultValue: true,
-      hideFromUI: true,
-    },
-    {
-      name: 'fitContent',
-      type: 'boolean',
-      helperText:
-        "When child blocks are provided, fit to them instead of using the image's aspect ratio",
-      defaultValue: true,
-    },
-    {
-      name: 'aspectRatio',
-      type: 'number',
-      helperText:
-        "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
-      advanced: true,
-      defaultValue: 0.7041,
-    },
-  ],
-};
+      });
+      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',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: [{
+      label: 'contain',
+      value: 'contain',
+      helperText: 'The image should never get cropped'
+    }, {
+      label: 'cover',
+      value: 'cover',
+      helperText: "The image should fill it's box, cropping when needed"
+    }]
+  }, {
+    name: 'backgroundPosition',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'altText',
+    type: 'string',
+    helperText: 'Text to display when the user has images off'
+  }, {
+    name: 'height',
+    type: 'number',
+    hideFromUI: true
+  }, {
+    name: 'width',
+    type: 'number',
+    hideFromUI: true
+  }, {
+    name: 'sizes',
+    type: 'string',
+    hideFromUI: true
+  }, {
+    name: 'srcset',
+    type: 'string',
+    hideFromUI: true
+  }, {
+    name: 'lazy',
+    type: 'boolean',
+    defaultValue: true,
+    hideFromUI: true
+  }, {
+    name: 'fitContent',
+    type: 'boolean',
+    helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
+    defaultValue: true
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+    advanced: true,
+    defaultValue: 0.7041
+  }]
+}

package/src/blocks/image/image.helpers.ts

@@ -3,73 +3,45 @@
 function removeProtocol(path: string) {
   return path.replace(/http(s)?:/, '');
 }
-
-function updateQueryParam(
-  uri = '',
-  key: string,
-  value: string | number | boolean
-): string {
+function updateQueryParam(uri = '', key: string, value: string | number | boolean): string {
   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: string, size: string): string | null {
   if (!src || !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
-  );
-
+  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;
 }
-
 export function getSrcSet(url: string): string {
   if (!url) {
     return url;
   }
-
   const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
-
   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(', ');
+    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 sizes.map(size => [getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(', ');
   }
-
   return url;
-}
+}

package/src/blocks/img/component-info.ts

@@ -1,21 +1,16 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,
-
-  image:
-    'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
-  inputs: [
-    {
-      name: 'image',
-      bubble: true,
-      type: 'file',
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
-      required: true,
-    },
-  ],
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
+  inputs: [{
+    name: 'image',
+    bubble: true,
+    type: 'file',
+    allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
+    required: true
+  }],
   noWrap: true,
-  static: true,
-};
+  static: true
+}

package/src/blocks/img/img.svelte

@@ -1,4 +1,7 @@
 <script context="module" lang="ts">
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
   export interface ImgProps {
     attributes?: any;
     imgSrc?: string; // TODO(misko): I think this is unused
@@ -20,35 +23,8 @@
 
 <script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
-
-  const isEvent = (attr) => attr.startsWith("on:");
-  const isNonEvent = (attr) => !attr.startsWith("on:");
-  const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-      if (filter(attr)) {
-        validAttr[attr] = attrs[attr];
-      }
-    });
-    return validAttr;
-  };
-  const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) =>
-      node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-      update(attrs = {}) {
-        const attrKeys = Object.keys(attrs);
-        attrKeys.map(teardown);
-        attrKeys.map(setup);
-      },
-      destroy() {
-        attrKeys.map(teardown);
-      },
-    };
-  };
+  import { filterAttrs } from "../helpers.js";
+  import { setAttrs } from "../helpers.js";
 
   export let backgroundSize: ImgProps["backgroundSize"];
   export let backgroundPosition: ImgProps["backgroundPosition"];
@@ -76,6 +52,6 @@
   key={(isEditing() && imgSrc) || "default-key"}
   alt={altText}
   src={imgSrc || image}
-  {...filterAttrs(attributes, isNonEvent)}
-  use:setAttrs={filterAttrs(attributes, isEvent)}
+  {...filterAttrs(attributes, "on:", false)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

package/src/blocks/input/component-info.ts

@@ -1,68 +1,37 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Form:Input',
-
-  image:
-    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
-  inputs: [
-    {
-      name: 'type',
-      type: 'text',
-      enum: [
-        'text',
-        'number',
-        'email',
-        'url',
-        'checkbox',
-        'radio',
-        'range',
-        'date',
-        'datetime-local',
-        'search',
-        'tel',
-        'time',
-        'file',
-        'month',
-        'week',
-        'password',
-        'color',
-        'hidden',
-      ],
-      defaultValue: 'text',
-    },
-    {
-      name: 'name',
-      type: 'string',
-      required: true,
-      helperText:
-        'Every input in a form needs a unique name describing what it takes, e.g. "email"',
-    },
-    {
-      name: 'placeholder',
-      type: 'string',
-      defaultValue: 'Hello there',
-      helperText: 'Text to display when there is no value',
-    },
-    // TODO: handle value vs default value automatically like ng-model
-    {
-      name: 'defaultValue',
-      type: 'string',
-    },
-    {
-      name: 'value',
-      type: 'string',
-      advanced: true,
-    },
-
-    {
-      name: 'required',
-      type: 'boolean',
-      helperText: 'Is this input required to be filled out to submit a form',
-      defaultValue: false,
-    },
-  ],
-
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
+  inputs: [{
+    name: 'type',
+    type: 'text',
+    enum: ['text', 'number', 'email', 'url', 'checkbox', 'radio', 'range', 'date', 'datetime-local', 'search', 'tel', 'time', 'file', 'month', 'week', 'password', 'color', 'hidden'],
+    defaultValue: 'text'
+  }, {
+    name: 'name',
+    type: 'string',
+    required: true,
+    helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
+  }, {
+    name: 'placeholder',
+    type: 'string',
+    defaultValue: 'Hello there',
+    helperText: 'Text to display when there is no value'
+  },
+  // TODO: handle value vs default value automatically like ng-model
+  {
+    name: 'defaultValue',
+    type: 'string'
+  }, {
+    name: 'value',
+    type: 'string',
+    advanced: true
+  }, {
+    name: 'required',
+    type: 'boolean',
+    helperText: 'Is this input required to be filled out to submit a form',
+    defaultValue: false
+  }],
   noWrap: true,
   static: true,
   defaultStyles: {
@@ -73,6 +42,6 @@ export const componentInfo: ComponentInfo = {
     borderRadius: '3px',
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: '#ccc',
-  },
-};
+    borderColor: '#ccc'
+  }
+}

package/src/blocks/input/input.svelte

@@ -1,4 +1,7 @@
 <script context="module" lang="ts">
+  /**
+   * This import is used by the Svelte SDK. Do not remove.
+   */ // eslint-disable-next-line unused-imports/no-unused-imports, @typescript-eslint/no-unused-vars
   export interface FormInputProps {
     type?: string;
     attributes?: any;
@@ -12,35 +15,8 @@
 
 <script lang="ts">
   import { isEditing } from "../../functions/is-editing.js";
-
-  const isEvent = (attr) => attr.startsWith("on:");
-  const isNonEvent = (attr) => !attr.startsWith("on:");
-  const filterAttrs = (attrs = {}, filter) => {
-    const validAttr = {};
-    Object.keys(attrs).forEach((attr) => {
-      if (filter(attr)) {
-        validAttr[attr] = attrs[attr];
-      }
-    });
-    return validAttr;
-  };
-  const setAttrs = (node, attrs = {}) => {
-    const attrKeys = Object.keys(attrs);
-    const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
-    const teardown = (attr) =>
-      node.removeEventListener(attr.substr(3), attrs[attr]);
-    attrKeys.map(setup);
-    return {
-      update(attrs = {}) {
-        const attrKeys = Object.keys(attrs);
-        attrKeys.map(teardown);
-        attrKeys.map(setup);
-      },
-      destroy() {
-        attrKeys.map(teardown);
-      },
-    };
-  };
+  import { filterAttrs } from "../helpers.js";
+  import { setAttrs } from "../helpers.js";
 
   export let attributes: FormInputProps["attributes"];
   export let defaultValue: FormInputProps["defaultValue"];
@@ -52,7 +28,7 @@
 </script>
 
 <input
-  {...filterAttrs(attributes, isNonEvent)}
+  {...filterAttrs(attributes, "on:", false)}
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {placeholder}
   {type}
@@ -60,5 +36,5 @@
   {value}
   {defaultValue}
   {required}
-  use:setAttrs={filterAttrs(attributes, isEvent)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

package/src/blocks/raw-text/component-info.ts

@@ -1,15 +1,11 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Builder:RawText',
   hideFromInsertMenu: true,
-
-  inputs: [
-    {
-      name: 'text',
-      bubble: true,
-      type: 'longText',
-      required: true,
-    },
-  ],
-};
+  inputs: [{
+    name: 'text',
+    bubble: true,
+    type: 'longText',
+    required: true
+  }]
+}

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

@@ -2,15 +2,12 @@
   export interface RawTextProps {
     attributes?: any;
     text?: string;
-    // builderBlock?: any;
   }
 </script>
 
 <script lang="ts">
-  export let attributes: RawTextProps["attributes"];
   export let text: RawTextProps["text"];
+  export let attributes: RawTextProps["attributes"];
 </script>
 
-<span class={attributes?.class || attributes?.className}
-  >{@html text || ""}</span
->
+<span class={attributes.class}>{@html text?.toString() || ""}</span>