@builder.io/sdk-svelte 0.5.9 → 0.6.1

package/lib/edge/blocks/columns/component-info.js

@@ -0,0 +1,219 @@
+export const componentInfo = {
+    // TODO: ways to statically preprocess JSON for references, functions, etc
+    name: 'Columns',
+    isRSC: true,
+    inputs: [{
+            name: 'columns',
+            type: 'array',
+            broadcast: true,
+            subFields: [{
+                    name: 'blocks',
+                    type: 'array',
+                    hideFromUI: true,
+                    defaultValue: [{
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto',
+                                    minHeight: '20px',
+                                    minWidth: '20px',
+                                    overflow: 'hidden'
+                                }
+                            },
+                            component: {
+                                name: 'Image',
+                                options: {
+                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                                    backgroundPosition: 'center',
+                                    backgroundSize: 'cover',
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        }, {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto'
+                                }
+                            },
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }]
+                }, {
+                    name: 'width',
+                    type: 'number',
+                    hideFromUI: true,
+                    helperText: 'Width %, e.g. set to 50 to fill half of the space'
+                }, {
+                    name: 'link',
+                    type: 'url',
+                    helperText: 'Optionally set a url that clicking this column will link to'
+                }],
+            defaultValue: [{
+                    blocks: [{
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto',
+                                    minHeight: '20px',
+                                    minWidth: '20px',
+                                    overflow: 'hidden'
+                                }
+                            },
+                            component: {
+                                name: 'Image',
+                                options: {
+                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                                    backgroundPosition: 'center',
+                                    backgroundSize: 'cover',
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        }, {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto'
+                                }
+                            },
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }]
+                }, {
+                    blocks: [{
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto',
+                                    minHeight: '20px',
+                                    minWidth: '20px',
+                                    overflow: 'hidden'
+                                }
+                            },
+                            component: {
+                                name: 'Image',
+                                options: {
+                                    image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+                                    backgroundPosition: 'center',
+                                    backgroundSize: 'cover',
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        }, {
+                            '@type': '@builder.io/sdk:Element',
+                            responsiveStyles: {
+                                large: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch',
+                                    flexShrink: '0',
+                                    position: 'relative',
+                                    marginTop: '30px',
+                                    textAlign: 'center',
+                                    lineHeight: 'normal',
+                                    height: 'auto'
+                                }
+                            },
+                            component: {
+                                name: 'Text',
+                                options: {
+                                    text: '<p>Enter some text...</p>'
+                                }
+                            }
+                        }]
+                }],
+            onChange: (options) => {
+                function clearWidths() {
+                    columns.forEach(col => {
+                        col.delete('width');
+                    });
+                }
+                const columns = options.get('columns');
+                if (Array.isArray(columns)) {
+                    const containsColumnWithWidth = !!columns.find(col => col.get('width'));
+                    if (containsColumnWithWidth) {
+                        const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));
+                        if (containsColumnWithoutWidth) {
+                            clearWidths();
+                        }
+                        else {
+                            const sumWidths = columns.reduce((memo, col) => {
+                                return memo + col.get('width');
+                            }, 0);
+                            const widthsDontAddUp = sumWidths !== 100;
+                            if (widthsDontAddUp) {
+                                clearWidths();
+                            }
+                        }
+                    }
+                }
+            }
+        }, {
+            name: 'space',
+            type: 'number',
+            defaultValue: 20,
+            helperText: 'Size of gap between columns',
+            advanced: true
+        }, {
+            name: 'stackColumnsAt',
+            type: 'string',
+            defaultValue: 'tablet',
+            helperText: 'Convert horizontal columns to vertical at what device size',
+            enum: ['tablet', 'mobile', 'never'],
+            advanced: true
+        }, {
+            name: 'reverseColumnsWhenStacked',
+            type: 'boolean',
+            defaultValue: false,
+            helperText: 'When stacking columns for mobile devices, reverse the ordering',
+            advanced: true
+        }]
+};

package/lib/edge/blocks/custom-code/component-info.d.ts

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

package/lib/edge/blocks/custom-code/component-info.js

@@ -0,0 +1,23 @@
+export const componentInfo = {
+    name: 'Custom Code',
+    static: true,
+    requiredPermissions: ['editCode'],
+    inputs: [{
+            name: 'code',
+            type: 'html',
+            required: true,
+            defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+            code: true
+        }, {
+            name: 'replaceNodes',
+            type: 'boolean',
+            helperText: 'Preserve server rendered dom nodes',
+            advanced: true
+        }, {
+            name: 'scriptsClientOnly',
+            type: 'boolean',
+            defaultValue: false,
+            helperText: 'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
+            advanced: true
+        }]
+};

package/lib/edge/blocks/custom-code/custom-code.svelte

@@ -0,0 +1,55 @@
+<script context="module"></script>
+
+<script>import { onMount } from "svelte";
+export let replaceNodes = undefined;
+export let code;
+function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
+        const scripts = elem.getElementsByTagName("script");
+        for (let i = 0; i < scripts.length; i++) {
+            const script = scripts[i];
+            if (script.src) {
+                if (scriptsInserted.includes(script.src)) {
+                    continue;
+                }
+                scriptsInserted.push(script.src);
+                const newScript = document.createElement("script");
+                newScript.async = true;
+                newScript.src = script.src;
+                document.head.appendChild(newScript);
+            }
+            else if (!script.type ||
+                [
+                    "text/javascript",
+                    "application/javascript",
+                    "application/ecmascript",
+                ].includes(script.type)) {
+                if (scriptsRun.includes(script.innerText)) {
+                    continue;
+                }
+                try {
+                    scriptsRun.push(script.innerText);
+                    new Function(script.innerText)();
+                }
+                catch (error) {
+                    console.warn("`CustomCode`: Error running script:", error);
+                }
+            }
+        }
+    }
+}
+let elem;
+let scriptsInserted = [];
+let scriptsRun = [];
+onMount(() => {
+    findAndRunScripts();
+});
+</script>
+
+<div
+  bind:this={elem}
+  class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
+>
+  {@html code}
+</div>

package/lib/edge/blocks/embed/component-info.d.ts

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

package/lib/edge/blocks/embed/component-info.js

@@ -0,0 +1,39 @@
+export const componentInfo = {
+    name: 'Embed',
+    static: true,
+    inputs: [{
+            name: 'url',
+            type: 'url',
+            required: true,
+            defaultValue: '',
+            helperText: 'e.g. enter a youtube url, google map, etc',
+            onChange: (options) => {
+                const url = options.get('url');
+                if (url) {
+                    options.set('content', 'Loading...');
+                    // TODO: get this out of here!
+                    const apiKey = 'ae0e60e78201a3f2b0de4b';
+                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
+                        if (options.get('url') === url) {
+                            if (data.html) {
+                                options.set('content', data.html);
+                            }
+                            else {
+                                options.set('content', 'Invalid url, please try another');
+                            }
+                        }
+                    }).catch(_err => {
+                        options.set('content', 'There was an error embedding this URL, please try again or another URL');
+                    });
+                }
+                else {
+                    options.delete('content');
+                }
+            }
+        }, {
+            name: 'content',
+            type: 'html',
+            defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+            hideFromUI: true
+        }]
+};

package/lib/edge/blocks/embed/embed.svelte

@@ -0,0 +1,42 @@
+<script context="module"></script>
+
+<script>import { isJsScript } from "./helpers.js";
+export let content;
+function findAndRunScripts() {
+    if (!elem || !elem.getElementsByTagName)
+        return;
+    const scripts = elem.getElementsByTagName("script");
+    for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+        if (script.src && !scriptsInserted.includes(script.src)) {
+            scriptsInserted.push(script.src);
+            const newScript = document.createElement("script");
+            newScript.async = true;
+            newScript.src = script.src;
+            document.head.appendChild(newScript);
+        }
+        else if (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
+            try {
+                scriptsRun.push(script.innerText);
+                new Function(script.innerText)();
+            }
+            catch (error) {
+                console.warn("`Embed`: Error running script:", error);
+            }
+        }
+    }
+}
+let elem;
+let scriptsInserted = [];
+let scriptsRun = [];
+let ranInitFn = false;
+function onUpdateFn_0(..._args) {
+    if (elem && !ranInitFn) {
+        ranInitFn = true;
+        findAndRunScripts();
+    }
+}
+$: onUpdateFn_0(...[elem, ranInitFn]);
+</script>
+
+<div class="builder-embed" bind:this={elem}>{@html content}</div>

package/lib/edge/blocks/embed/helpers.d.ts

@@ -0,0 +1 @@
+export declare const isJsScript: (script: HTMLScriptElement) => boolean;

package/lib/edge/blocks/embed/helpers.js

@@ -0,0 +1,2 @@
+const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
+export const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);

package/lib/edge/blocks/form/component-info.d.ts

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

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

@@ -0,0 +1,232 @@
+export const componentInfo = {
+    name: 'Form:Form',
+    // editableTags: ['builder-form-error']
+    defaults: {
+        responsiveStyles: {
+            large: {
+                marginTop: '15px',
+                paddingBottom: '15px'
+            }
+        }
+    },
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
+    inputs: [{
+            name: 'sendSubmissionsTo',
+            type: 'string',
+            // TODO: save to builder data and user can download as csv
+            // TODO: easy for mode too or computed add/remove fields form mode
+            // so you can edit details and high level mode at same time...
+            // Later - more integrations like mailchimp
+            // /api/v1/form-submit?to=mailchimp
+            enum: [{
+                    label: 'Send to email',
+                    value: 'email',
+                    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'
+        }, {
+            name: 'sendSubmissionsToEmail',
+            type: 'string',
+            required: true,
+            // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+            defaultValue: 'your@email.com',
+            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"'
+        }, {
+            name: 'name',
+            type: 'string',
+            defaultValue: 'My form'
+            // advanced: true
+        }, {
+            name: 'action',
+            type: 'string',
+            helperText: 'URL to send the form data to',
+            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'
+        }, {
+            name: 'method',
+            type: 'string',
+            showIf: 'options.get("sendSubmissionsTo") === "custom"',
+            defaultValue: 'POST',
+            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'
+        }, {
+            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'
+        }, {
+            name: 'resetFormOnSubmit',
+            type: 'boolean',
+            showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
+            advanced: true
+        }, {
+            name: 'successMessage',
+            type: 'uiBlocks',
+            hideFromUI: true,
+            defaultValue: [{
+                    '@type': '@builder.io/sdk:Element',
+                    responsiveStyles: {
+                        large: {
+                            marginTop: '10px'
+                        }
+                    },
+                    component: {
+                        name: 'Text',
+                        options: {
+                            text: '<span>Thanks!</span>'
+                        }
+                    }
+                }]
+        }, {
+            name: 'validate',
+            type: 'boolean',
+            defaultValue: 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" }}'
+        }, {
+            name: 'errorMessage',
+            type: 'uiBlocks',
+            hideFromUI: true,
+            defaultValue: [{
+                    '@type': '@builder.io/sdk:Element',
+                    responsiveStyles: {
+                        large: {
+                            marginTop: '10px'
+                        }
+                    },
+                    bindings: {
+                        '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>'
+                        }
+                    }
+                }]
+        }, {
+            name: 'sendingMessage',
+            type: 'uiBlocks',
+            hideFromUI: true,
+            defaultValue: [{
+                    '@type': '@builder.io/sdk:Element',
+                    responsiveStyles: {
+                        large: {
+                            marginTop: '10px'
+                        }
+                    },
+                    component: {
+                        name: 'Text',
+                        options: {
+                            text: '<span>Sending...</span>'
+                        }
+                    }
+                }]
+        }, {
+            name: 'customHeaders',
+            type: 'map',
+            valueType: {
+                type: 'string'
+            },
+            advanced: true,
+            showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
+        }],
+    noWrap: true,
+    canHaveChildren: true,
+    defaultChildren: [{
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    marginTop: '10px'
+                }
+            },
+            component: {
+                name: 'Text',
+                options: {
+                    text: '<span>Enter your name</span>'
+                }
+            }
+        }, {
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    marginTop: '10px'
+                }
+            },
+            component: {
+                name: 'Form:Input',
+                options: {
+                    name: 'name',
+                    placeholder: 'Jane Doe'
+                }
+            }
+        }, {
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    marginTop: '10px'
+                }
+            },
+            component: {
+                name: 'Text',
+                options: {
+                    text: '<span>Enter your email</span>'
+                }
+            }
+        }, {
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    marginTop: '10px'
+                }
+            },
+            component: {
+                name: 'Form:Input',
+                options: {
+                    name: 'email',
+                    placeholder: 'jane@doe.com'
+                }
+            }
+        }, {
+            '@type': '@builder.io/sdk:Element',
+            responsiveStyles: {
+                large: {
+                    marginTop: '10px'
+                }
+            },
+            component: {
+                name: 'Form:SubmitButton',
+                options: {
+                    text: 'Submit'
+                }
+            }
+        }]
+};

package/lib/edge/blocks/form/form.svelte

@@ -0,0 +1,2 @@
+<script>"use strict";
+</script>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FormProps = typeof __propDef.props;
+export type FormEvents = typeof __propDef.events;
+export type FormSlots = typeof __propDef.slots;
+export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
+}
+export {};

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

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

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

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

package/lib/edge/blocks/fragment/fragment.svelte

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