@builder.io/sdk-svelte 0.0.1-9 → 0.0.2

package/package/blocks/form/form.svelte

@@ -0,0 +1,259 @@
+<script context="module">// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+</script>
+
+<script>import { getContext } from "svelte";
+import RenderBlock from "../../components/render-block/render-block.svelte";
+import BuilderBlocks from "../../components/render-blocks.svelte";
+import { isEditing } from "../../functions/is-editing.js";
+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;
+let builderContext = getContext(BuilderContext.key);
+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;
+            }
+        }
+        formState = "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;
+            formState = 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;
+            formState = "error";
+        });
+    }
+}
+$: submissionState = () => {
+    return (isEditing() && previewState) || formState;
+};
+let formRef;
+let formState = "unsubmitted";
+let responseData = null;
+let formErrorMessage = "";
+</script>
+
+<form
+  {...attributes}
+  {validate}
+  bind:this={formRef}
+  action={!sendWithJs && action}
+  {method}
+  {name}
+  on:submit={(event) => {
+    onSubmit(event);
+  }}
+>
+  {#if builderBlock && builderBlock.children}
+    {#each builderBlock?.children as block}
+      <RenderBlock {block} context={builderContext} />
+    {/each}
+  {/if}
+
+  {#if submissionState() === "error"}
+    <BuilderBlocks dataPath="errorMessage" blocks={errorMessage} />
+  {/if}
+
+  {#if submissionState() === "sending"}
+    <BuilderBlocks dataPath="sendingMessage" blocks={sendingMessage} />
+  {/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} />
+  {/if}
+</form>
+
+<style>
+  .pre {
+    padding: 10px;
+    color: red;
+    text-align: center;
+  }
+</style>

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

@@ -0,0 +1,70 @@
+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 declare 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"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FormProps = typeof __propDef.props;
+export declare type FormEvents = typeof __propDef.events;
+export declare type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponentTyped<FormProps, FormEvents, FormSlots> {
+}
+export {};

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

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

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

@@ -0,0 +1,8 @@
+export const componentInfo = {
+    name: 'Fragment',
+    static: true,
+    hidden: true,
+    builtIn: true,
+    canHaveChildren: true,
+    noWrap: true,
+};

package/package/blocks/fragment/fragment.lite.tsx

@@ -0,0 +1,12 @@
+<script context="module" lang="ts">
+  export interface FragmentProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+  }
+</script>
+
+<script lang="ts">
+</script>
+
+<span><slot /></span>

package/package/blocks/fragment/fragment.svelte

@@ -0,0 +1,5 @@
+<script context="module"></script>
+
+<script></script>
+
+<span><slot /></span>

package/package/blocks/fragment/fragment.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+export interface FragmentProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+}
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FragmentProps = typeof __propDef.props;
+export declare type FragmentEvents = typeof __propDef.events;
+export declare type FragmentSlots = typeof __propDef.slots;
+export default class Fragment extends SvelteComponentTyped<FragmentProps, FragmentEvents, FragmentSlots> {
+}
+export {};

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

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

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

@@ -0,0 +1,153 @@
+import { markSerializable } from '../util.js';
+export const componentInfo = {
+    name: 'Image',
+    static: true,
+    builtIn: 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',
+    defaultStyles: {
+        position: 'relative',
+        minHeight: '20px',
+        minWidth: '20px',
+        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%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            onChange: markSerializable((options) => {
+                const DEFAULT_ASPECT_RATIO = 0.7041;
+                options.delete('srcset');
+                options.delete('noWebp');
+                function loadImage(url, timeout = 60000) {
+                    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);
+                            }
+                        }
+                    });
+                }
+            }),
+        },
+        {
+            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/package/blocks/image/image.helpers.d.ts

@@ -0,0 +1 @@
+export declare function getSrcSet(url: string): string;

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

@@ -0,0 +1,56 @@
+// Taken from (and modified) the shopify theme script repo
+// https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
+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?.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;
+}
+export function getSrcSet(url) {
+    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(', ');
+    }
+    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;
+}