@builder.io/sdk-svelte 0.4.5 → 0.5.0

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

@@ -5,13 +5,12 @@ export const componentInfo = {
         responsiveStyles: {
             large: {
                 marginTop: '15px',
-                paddingBottom: '15px',
-            },
-        },
+                paddingBottom: '15px'
+            }
+        }
     },
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
-    inputs: [
-        {
+    inputs: [{
             name: 'sendSubmissionsTo',
             type: 'string',
             // TODO: save to builder data and user can download as csv
@@ -19,249 +18,215 @@ export const componentInfo = {
             // so you can edit details and high level mode at same time...
             // Later - more integrations like mailchimp
             // /api/v1/form-submit?to=mailchimp
-            enum: [
-                {
+            enum: [{
                     label: 'Send to email',
                     value: 'email',
-                    helperText: 'Send form submissions to the email address of your choosing',
-                },
-                {
+                    helperText: 'Send form submissions to the email address of your choosing'
+                }, {
                     label: 'Custom',
                     value: 'custom',
-                    helperText: 'Handle where the form requests go manually with a little code, e.g. to your own custom backend',
-                },
-            ],
-            defaultValue: 'email',
-        },
-        {
+                    helperText: 'Handle where the form requests go manually with a little code, e.g. to your own custom backend'
+                }],
+            defaultValue: 'email'
+        }, {
             name: 'sendSubmissionsToEmail',
             type: 'string',
             required: true,
+            // TODO: required: () => options.get("sendSubmissionsTo") === "email"
             defaultValue: 'your@email.com',
-            showIf: 'options.get("sendSubmissionsTo") === "email"',
-        },
-        {
+            showIf: 'options.get("sendSubmissionsTo") === "email"'
+        }, {
             name: 'sendWithJs',
             type: 'boolean',
             helperText: 'Set to false to use basic html form action',
             defaultValue: true,
-            showIf: 'options.get("sendSubmissionsTo") === "custom"',
-        },
-        {
+            showIf: 'options.get("sendSubmissionsTo") === "custom"'
+        }, {
             name: 'name',
             type: 'string',
-            defaultValue: 'My form',
+            defaultValue: 'My form'
             // advanced: true
-        },
-        {
+        }, {
             name: 'action',
             type: 'string',
             helperText: 'URL to send the form data to',
-            showIf: 'options.get("sendSubmissionsTo") === "custom"',
-        },
-        {
+            showIf: 'options.get("sendSubmissionsTo") === "custom"'
+        }, {
             name: 'contentType',
             type: 'string',
             defaultValue: 'application/json',
             advanced: true,
             // TODO: do automatically if file input
-            enum: [
-                'application/json',
-                'multipart/form-data',
-                'application/x-www-form-urlencoded',
-            ],
-            showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
-        },
-        {
+            enum: ['application/json', 'multipart/form-data', 'application/x-www-form-urlencoded'],
+            showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+        }, {
             name: 'method',
             type: 'string',
             showIf: 'options.get("sendSubmissionsTo") === "custom"',
             defaultValue: 'POST',
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'previewState',
             type: 'string',
             // TODO: persist: false flag
             enum: ['unsubmitted', 'sending', 'success', 'error'],
             defaultValue: 'unsubmitted',
             helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
-            showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
-        },
-        {
+            showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+        }, {
             name: 'successUrl',
             type: 'url',
             helperText: 'Optional URL to redirect the user to on form submission success',
-            showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true',
-        },
-        {
+            showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
+        }, {
             name: 'resetFormOnSubmit',
             type: 'boolean',
             showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'successMessage',
             type: 'uiBlocks',
             hideFromUI: true,
-            defaultValue: [
-                {
+            defaultValue: [{
                     '@type': '@builder.io/sdk:Element',
                     responsiveStyles: {
                         large: {
-                            marginTop: '10px',
-                        },
+                            marginTop: '10px'
+                        }
                     },
                     component: {
                         name: 'Text',
                         options: {
-                            text: '<span>Thanks!</span>',
-                        },
-                    },
-                },
-            ],
-        },
-        {
+                            text: '<span>Thanks!</span>'
+                        }
+                    }
+                }]
+        }, {
             name: 'validate',
             type: 'boolean',
             defaultValue: true,
-            advanced: true,
-        },
-        {
+            advanced: true
+        }, {
             name: 'errorMessagePath',
             type: 'text',
             advanced: true,
-            helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}',
-        },
-        {
+            helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
+        }, {
             name: 'errorMessage',
             type: 'uiBlocks',
             hideFromUI: true,
-            defaultValue: [
-                {
+            defaultValue: [{
                     '@type': '@builder.io/sdk:Element',
                     responsiveStyles: {
                         large: {
-                            marginTop: '10px',
-                        },
+                            marginTop: '10px'
+                        }
                     },
                     bindings: {
-                        'component.options.text': 'state.formErrorMessage || block.component.options.text',
+                        'component.options.text': 'state.formErrorMessage || block.component.options.text'
                     },
                     component: {
                         name: 'Text',
                         options: {
-                            text: '<span>Form submission error :( Please check your answers and try again</span>',
-                        },
-                    },
-                },
-            ],
-        },
-        {
+                            text: '<span>Form submission error :( Please check your answers and try again</span>'
+                        }
+                    }
+                }]
+        }, {
             name: 'sendingMessage',
             type: 'uiBlocks',
             hideFromUI: true,
-            defaultValue: [
-                {
+            defaultValue: [{
                     '@type': '@builder.io/sdk:Element',
                     responsiveStyles: {
                         large: {
-                            marginTop: '10px',
-                        },
+                            marginTop: '10px'
+                        }
                     },
                     component: {
                         name: 'Text',
                         options: {
-                            text: '<span>Sending...</span>',
-                        },
-                    },
-                },
-            ],
-        },
-        {
+                            text: '<span>Sending...</span>'
+                        }
+                    }
+                }]
+        }, {
             name: 'customHeaders',
             type: 'map',
             valueType: {
-                type: 'string',
+                type: 'string'
             },
             advanced: true,
-            showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true',
-        },
-    ],
+            showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+        }],
     noWrap: true,
     canHaveChildren: true,
-    defaultChildren: [
-        {
+    defaultChildren: [{
             '@type': '@builder.io/sdk:Element',
             responsiveStyles: {
                 large: {
-                    marginTop: '10px',
-                },
+                    marginTop: '10px'
+                }
             },
             component: {
                 name: 'Text',
                 options: {
-                    text: '<span>Enter your name</span>',
-                },
-            },
-        },
-        {
+                    text: '<span>Enter your name</span>'
+                }
+            }
+        }, {
             '@type': '@builder.io/sdk:Element',
             responsiveStyles: {
                 large: {
-                    marginTop: '10px',
-                },
+                    marginTop: '10px'
+                }
             },
             component: {
                 name: 'Form:Input',
                 options: {
                     name: 'name',
-                    placeholder: 'Jane Doe',
-                },
-            },
-        },
-        {
+                    placeholder: 'Jane Doe'
+                }
+            }
+        }, {
             '@type': '@builder.io/sdk:Element',
             responsiveStyles: {
                 large: {
-                    marginTop: '10px',
-                },
+                    marginTop: '10px'
+                }
             },
             component: {
                 name: 'Text',
                 options: {
-                    text: '<span>Enter your email</span>',
-                },
-            },
-        },
-        {
+                    text: '<span>Enter your email</span>'
+                }
+            }
+        }, {
             '@type': '@builder.io/sdk:Element',
             responsiveStyles: {
                 large: {
-                    marginTop: '10px',
-                },
+                    marginTop: '10px'
+                }
             },
             component: {
                 name: 'Form:Input',
                 options: {
                     name: 'email',
-                    placeholder: 'jane@doe.com',
-                },
-            },
-        },
-        {
+                    placeholder: 'jane@doe.com'
+                }
+            }
+        }, {
             '@type': '@builder.io/sdk:Element',
             responsiveStyles: {
                 large: {
-                    marginTop: '10px',
-                },
+                    marginTop: '10px'
+                }
             },
             component: {
                 name: 'Form:SubmitButton',
                 options: {
-                    text: 'Submit',
-                },
-            },
-        },
-    ],
+                    text: 'Submit'
+                }
+            }
+        }]
 };

package/package/blocks/form/form.svelte

@@ -1,289 +1,2 @@
-<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";
-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);
-        },
-    };
-};
-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
-  {validate}
-  bind:this={formRef}
-  action={!sendWithJs && action}
-  {method}
-  {name}
-  on:submit={(event) => {
-    onSubmit(event);
-  }}
-  {...filterAttrs(attributes, isNonEvent)}
-  use:setAttrs={filterAttrs(attributes, isEvent)}
->
-  {#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>
+<script>"use strict";
+</script>