@builder.io/sdk-react 0.4.5 → 0.5.0

package/dist/{sdk/blocks → 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/dist/blocks/form/form.d.ts

@@ -0,0 +1,2 @@
+declare function FormComponent(props: any): JSX.Element;
+export default FormComponent;

package/dist/blocks/form/form.js

@@ -0,0 +1,6 @@
+"use client";
+import * as React from "react";
+function FormComponent(props) {
+    return React.createElement(React.Fragment, null);
+}
+export default FormComponent;

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

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

package/dist/{sdk/blocks → blocks}/fragment/component-info.js

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

package/dist/{sdk/blocks → blocks}/fragment/fragment.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface FragmentProps {
     maxWidth?: number;
     attributes?: any;

package/dist/{sdk/blocks → blocks}/fragment/fragment.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 function FragmentComponent(props) {
     return React.createElement("span", null, props.children);

package/dist/blocks/helpers.d.ts

@@ -0,0 +1,13 @@
+export declare function filterAttrs(attrs: {
+    [index: string]: any;
+}, 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/dist/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/dist/blocks/image/component-info.d.ts

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

package/dist/{sdk/blocks → 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/dist/{sdk/blocks → blocks}/image/image.d.ts

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

package/dist/{sdk/blocks → 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;
 }