@builder.io/sdk-svelte 0.4.5 → 0.5.0

package/package/blocks/form/form.svelte.d.ts

@@ -1,62 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-/**
- * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
- * to be cleaned up before the component can actually be usable.
- */
-interface BuilderElement {
-}
-/**
- * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
- * to be cleaned up before the component can actually be usable.
- */
-export interface FormProps {
-    attributes?: any;
-    name?: string;
-    action?: string;
-    validate?: boolean;
-    method?: string;
-    builderBlock?: BuilderElement;
-    sendSubmissionsTo?: string;
-    sendSubmissionsToEmail?: string;
-    sendWithJs?: boolean;
-    contentType?: string;
-    customHeaders?: {
-        [key: string]: string;
-    };
-    successUrl?: string;
-    previewState?: FormState;
-    successMessage?: BuilderElement[];
-    errorMessage?: BuilderElement[];
-    sendingMessage?: BuilderElement[];
-    resetFormOnSubmit?: boolean;
-    errorMessagePath?: string;
-}
-/**
- * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
- * to be cleaned up before the component can actually be usable.
- */
-export type FormState = "unsubmitted" | "sending" | "success" | "error";
 declare const __propDef: {
-    props: {
-        previewState: FormProps["previewState"];
-        sendWithJs: FormProps["sendWithJs"];
-        sendSubmissionsTo: FormProps["sendSubmissionsTo"];
-        action: FormProps["action"];
-        customHeaders: FormProps["customHeaders"];
-        contentType: FormProps["contentType"];
-        sendSubmissionsToEmail: FormProps["sendSubmissionsToEmail"];
-        name: FormProps["name"];
-        method: FormProps["method"];
-        errorMessagePath: FormProps["errorMessagePath"];
-        resetFormOnSubmit: FormProps["resetFormOnSubmit"];
-        successUrl: FormProps["successUrl"];
-        validate: FormProps["validate"];
-        attributes: FormProps["attributes"];
-        builderBlock: FormProps["builderBlock"];
-        errorMessage: FormProps["errorMessage"];
-        sendingMessage: FormProps["sendingMessage"];
-        successMessage: FormProps["successMessage"];
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/blocks/fragment/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;

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

@@ -3,5 +3,5 @@ export const componentInfo = {
     static: true,
     hidden: true,
     canHaveChildren: true,
-    noWrap: true,
+    noWrap: true
 };

package/package/blocks/helpers.d.ts

@@ -0,0 +1,13 @@
+export declare function filterAttrs(attrs: {
+    [index: string]: any;
+} | undefined, prefix: string, isEvent: boolean): {
+    [index: string]: any;
+};
+/**
+ * Svelte SDK: workaround to dynamically provide event handlers to components/elements.
+ * https://svelte.dev/repl/1246699e266f41218a8eeb45b9b58b54?version=3.24.1
+ */
+export declare function setAttrs(node: HTMLElement, attrs?: Record<string, (event: Event) => void>): {
+    update(attrs?: {}): void;
+    destroy(): void;
+};

package/package/blocks/helpers.js

@@ -0,0 +1,40 @@
+export function filterAttrs(attrs = {}, prefix, isEvent) {
+    const result = {};
+    for (const attr in attrs) {
+        if (!attrs[attr])
+            continue;
+        if (isEvent && !attr.startsWith(prefix))
+            continue;
+        const eventName = isEvent ? attr.replace(prefix, '') : attr;
+        result[eventName] = attrs[attr];
+    }
+    return result;
+}
+/**
+ * Svelte SDK: workaround to dynamically provide event handlers to components/elements.
+ * https://svelte.dev/repl/1246699e266f41218a8eeb45b9b58b54?version=3.24.1
+ */
+export function setAttrs(node, attrs = {}) {
+    const attrKeys = Object.keys(attrs);
+    /**
+     *
+     * @param {string} attr
+     */
+    const setup = (attr) => node.addEventListener(attr, attrs[attr]);
+    /**
+     *
+     * @param {string} attr
+     */
+    const teardown = (attr) => node.removeEventListener(attr, attrs[attr]);
+    attrKeys.forEach(setup);
+    return {
+        update(attrs = {}) {
+            const attrKeys = Object.keys(attrs);
+            attrKeys.forEach(teardown);
+            attrKeys.forEach(setup);
+        },
+        destroy() {
+            attrKeys.forEach(teardown);
+        }
+    };
+}

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

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;

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

@@ -1,4 +1,3 @@
-import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Image',
     static: true,
@@ -7,18 +6,17 @@ export const componentInfo = {
         position: 'relative',
         minHeight: '20px',
         minWidth: '20px',
-        overflow: 'hidden',
+        overflow: 'hidden'
     },
     canHaveChildren: true,
-    inputs: [
-        {
+    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) => {
+            onChange: (options) => {
                 const DEFAULT_ASPECT_RATIO = 0.7041;
                 options.delete('srcset');
                 options.delete('noWebp');
@@ -30,7 +28,7 @@ export const componentInfo = {
                             loaded = true;
                             resolve(img);
                         };
-                        img.addEventListener('error', (event) => {
+                        img.addEventListener('error', event => {
                             console.warn('Image load failed', event.error);
                             reject(event.error);
                         });
@@ -48,19 +46,15 @@ export const componentInfo = {
                 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) => {
+                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) => {
+                    return loadImage(value).then(img => {
                         const possiblyUpdatedAspectRatio = options.get('aspectRatio');
-                        if (options.get('image') === value &&
-                            (!possiblyUpdatedAspectRatio ||
-                                possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
+                        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);
@@ -69,84 +63,60 @@ export const componentInfo = {
                         }
                     });
                 }
-            }),
-        },
-        {
+            }
+        }, {
             name: 'backgroundSize',
             type: 'text',
             defaultValue: 'cover',
-            enum: [
-                {
+            enum: [{
                     label: 'contain',
                     value: 'contain',
-                    helperText: 'The image should never get cropped',
-                },
-                {
+                    helperText: 'The image should never get cropped'
+                }, {
                     label: 'cover',
                     value: 'cover',
-                    helperText: "The image should fill it's box, cropping when needed",
-                },
-            ],
-        },
-        {
+                    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',
-            ],
-        },
-        {
+            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',
-        },
-        {
+            helperText: 'Text to display when the user has images off'
+        }, {
             name: 'height',
             type: 'number',
-            hideFromUI: true,
-        },
-        {
+            hideFromUI: true
+        }, {
             name: 'width',
             type: 'number',
-            hideFromUI: true,
-        },
-        {
+            hideFromUI: true
+        }, {
             name: 'sizes',
             type: 'string',
-            hideFromUI: true,
-        },
-        {
+            hideFromUI: true
+        }, {
             name: 'srcset',
             type: 'string',
-            hideFromUI: true,
-        },
-        {
+            hideFromUI: true
+        }, {
             name: 'lazy',
             type: 'boolean',
             defaultValue: true,
-            hideFromUI: 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,
-        },
-        {
+            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,
-        },
-    ],
+            defaultValue: 0.7041
+        }]
 };

package/package/blocks/image/image.helpers.js

@@ -38,19 +38,10 @@ export function getSrcSet(url) {
         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/package/blocks/image/image.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvelteComponentTyped } from "svelte";
 export interface ImageProps {
     className?: string;

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

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;

package/package/blocks/img/component-info.js

@@ -3,15 +3,13 @@ export const componentInfo = {
     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: [
-        {
+    inputs: [{
             name: 'image',
             bubble: true,
             type: 'file',
             allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
-            required: true,
-        },
-    ],
+            required: true
+        }],
     noWrap: true,
-    static: true,
+    static: true
 };

package/package/blocks/img/img.svelte

@@ -1,33 +1,8 @@
 <script context="module"></script>
 
 <script>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;
 export let backgroundPosition;
 export let imgSrc;
@@ -54,6 +29,6 @@ function mitosis_styling(node, vars) {
   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/package/blocks/img/img.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-export interface ImgProps {
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ export interface ImgProps {
     attributes?: any;
     imgSrc?: string;
     image?: string;

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

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;

package/package/blocks/input/component-info.js

@@ -1,61 +1,36 @@
 export const componentInfo = {
     name: 'Form:Input',
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
-    inputs: [
-        {
+    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',
-        },
-        {
+            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"',
-        },
-        {
+            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',
+            helperText: 'Text to display when there is no value'
         },
         // TODO: handle value vs default value automatically like ng-model
         {
             name: 'defaultValue',
-            type: 'string',
-        },
-        {
+            type: 'string'
+        }, {
             name: 'value',
             type: 'string',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'required',
             type: 'boolean',
             helperText: 'Is this input required to be filled out to submit a form',
-            defaultValue: false,
-        },
-    ],
+            defaultValue: false
+        }],
     noWrap: true,
     static: true,
     defaultStyles: {
@@ -66,6 +41,6 @@ export const componentInfo = {
         borderRadius: '3px',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: '#ccc',
-    },
+        borderColor: '#ccc'
+    }
 };

package/package/blocks/input/input.svelte

@@ -1,33 +1,8 @@
 <script context="module"></script>
 
 <script>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;
 export let defaultValue;
 export let placeholder;
@@ -38,7 +13,7 @@ export let required;
 </script>
 
 <input
-  {...filterAttrs(attributes, isNonEvent)}
+  {...filterAttrs(attributes, "on:", false)}
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {placeholder}
   {type}
@@ -46,5 +21,5 @@ export let required;
   {value}
   {defaultValue}
   {required}
-  use:setAttrs={filterAttrs(attributes, isEvent)}
+  use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

package/package/blocks/input/input.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-export interface FormInputProps {
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */ export interface FormInputProps {
     type?: string;
     attributes?: any;
     name?: string;

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

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;

package/package/blocks/raw-text/component-info.js

@@ -1,12 +1,10 @@
 export const componentInfo = {
     name: 'Builder:RawText',
     hideFromInsertMenu: true,
-    inputs: [
-        {
+    inputs: [{
             name: 'text',
             bubble: true,
             type: 'longText',
-            required: true,
-        },
-    ],
+            required: true
+        }]
 };

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

@@ -1,9 +1,7 @@
 <script context="module"></script>
 
-<script>export let attributes;
-export let text;
+<script>export let text;
+export let attributes;
 </script>
 
-<span class={attributes?.class || attributes?.className}
-  >{@html text || ""}</span
->
+<span class={attributes.class}>{@html text?.toString() || ""}</span>

package/package/blocks/raw-text/raw-text.svelte.d.ts

@@ -5,8 +5,8 @@ export interface RawTextProps {
 }
 declare const __propDef: {
     props: {
-        attributes: RawTextProps["attributes"];
         text: RawTextProps["text"];
+        attributes: RawTextProps["attributes"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/section/component-info.d.ts

@@ -1,2 +1,2 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../types/components.js';
 export declare const componentInfo: ComponentInfo;