@builder.io/sdk-react-nextjs 0.5.8 → 0.6.0

package/dist/blocks/columns/component-info.js

@@ -1,219 +0,0 @@
-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/dist/blocks/custom-code/component-info.js

@@ -1,23 +0,0 @@
-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/dist/blocks/custom-code/custom-code.js

@@ -1,51 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-function CustomCode(props) {
-    const elem = useRef(null);
-    const [scriptsInserted, setScriptsInserted] = useState(() => []);
-    const [scriptsRun, setScriptsRun] = useState(() => []);
-    function findAndRunScripts() {
-        // TODO: Move this function to standalone one in '@builder.io/utils'
-        if (elem.current &&
-            elem.current.getElementsByTagName &&
-            typeof window !== "undefined") {
-            const scripts = elem.current.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);
-                    }
-                }
-            }
-        }
-    }
-    useEffect(() => {
-        findAndRunScripts();
-    }, []);
-    return (React.createElement("div", { ref: elem, className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
-}
-export default CustomCode;

package/dist/blocks/embed/component-info.js

@@ -1,39 +0,0 @@
-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/dist/blocks/embed/embed.js

@@ -1,42 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-import { isJsScript } from "./helpers.js";
-function Embed(props) {
-    const elem = useRef(null);
-    const [scriptsInserted, setScriptsInserted] = useState(() => []);
-    const [scriptsRun, setScriptsRun] = useState(() => []);
-    const [ranInitFn, setRanInitFn] = useState(() => false);
-    function findAndRunScripts() {
-        if (!elem.current || !elem.current.getElementsByTagName)
-            return;
-        const scripts = elem.current.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);
-                }
-            }
-        }
-    }
-    useEffect(() => {
-        if (elem.current && !ranInitFn) {
-            setRanInitFn(true);
-            findAndRunScripts();
-        }
-    }, [elem.current, ranInitFn]);
-    return (React.createElement("div", { className: "builder-embed", ref: elem, dangerouslySetInnerHTML: { __html: props.content } }));
-}
-export default Embed;

package/dist/blocks/embed/helpers.js

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

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

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

package/dist/blocks/fragment/fragment.js

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

package/dist/blocks/helpers.js

@@ -1,40 +0,0 @@
-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.js

@@ -1,122 +0,0 @@
-export const componentInfo = {
-    name: 'Image',
-    static: 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%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
-            onChange: (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/dist/blocks/image/image.helpers.js

@@ -1,47 +0,0 @@
-// 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;
-}