@builder.io/sdk-react-nextjs 0.5.9 → 0.6.1

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

@@ -1,82 +0,0 @@
-export const componentInfo = {
-    name: 'Video',
-    canHaveChildren: true,
-    defaultStyles: {
-        minHeight: '20px',
-        minWidth: '20px'
-    },
-    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
-    inputs: [{
-            name: 'video',
-            type: 'file',
-            allowedFileTypes: ['mp4'],
-            bubble: true,
-            defaultValue: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
-            required: true
-        }, {
-            name: 'posterImage',
-            type: 'file',
-            allowedFileTypes: ['jpeg', 'png'],
-            helperText: 'Image to show before the video plays'
-        }, {
-            name: 'autoPlay',
-            type: 'boolean',
-            defaultValue: true
-        }, {
-            name: 'controls',
-            type: 'boolean',
-            defaultValue: false
-        }, {
-            name: 'muted',
-            type: 'boolean',
-            defaultValue: true
-        }, {
-            name: 'loop',
-            type: 'boolean',
-            defaultValue: true
-        }, {
-            name: 'playsInline',
-            type: 'boolean',
-            defaultValue: true
-        }, {
-            name: 'fit',
-            type: 'text',
-            defaultValue: 'cover',
-            enum: ['contain', 'cover', 'fill', 'auto']
-        }, {
-            name: 'preload',
-            type: 'text',
-            defaultValue: 'metadata',
-            enum: ['auto', 'metadata', 'none']
-        }, {
-            name: 'fitContent',
-            type: 'boolean',
-            helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
-            defaultValue: true,
-            advanced: true
-        }, {
-            name: 'position',
-            type: 'text',
-            defaultValue: 'center',
-            enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
-        }, {
-            name: 'height',
-            type: 'number',
-            advanced: true
-        }, {
-            name: 'width',
-            type: 'number',
-            advanced: true
-        }, {
-            name: 'aspectRatio',
-            type: 'number',
-            advanced: true,
-            defaultValue: 0.7004048582995948
-        }, {
-            name: 'lazyLoad',
-            type: 'boolean',
-            helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-            defaultValue: true,
-            advanced: true
-        }]
-};

package/dist/blocks/video/video.js

@@ -1,50 +0,0 @@
-"use client";
-import * as React from "react";
-function Video(props) {
-    function videoProps() {
-        return {
-            ...(props.autoPlay === true
-                ? {
-                    autoPlay: true,
-                }
-                : {}),
-            ...(props.muted === true
-                ? {
-                    muted: true,
-                }
-                : {}),
-            ...(props.controls === true
-                ? {
-                    controls: true,
-                }
-                : {}),
-            ...(props.loop === true
-                ? {
-                    loop: true,
-                }
-                : {}),
-            ...(props.playsInline === true
-                ? {
-                    playsInline: true,
-                }
-                : {}),
-        };
-    }
-    function spreadProps() {
-        return {
-            ...props.attributes,
-            ...videoProps(),
-        };
-    }
-    return (React.createElement("video", { ...spreadProps(), preload: props.preload || "metadata", style: {
-            width: "100%",
-            height: "100%",
-            ...props.attributes?.style,
-            objectFit: props.fit,
-            objectPosition: props.position,
-            // Hack to get object fit to work as expected and
-            // not have the video overflow
-            borderRadius: 1,
-        }, src: props.video || "no-src", poster: props.posterImage }));
-}
-export default Video;

package/dist/components/block/block.helpers.js

@@ -1,69 +0,0 @@
-import { evaluate } from '../../functions/evaluate/index.js';
-import { getProcessedBlock } from '../../functions/get-processed-block.js';
-/**
- * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
- */
-const EMPTY_HTML_ELEMENTS = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
-export const isEmptyHtmlElement = (tagName) => {
-    return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
-export const getComponent = ({ block, context, registeredComponents }) => {
-    const componentName = getProcessedBlock({
-        block,
-        localState: context.localState,
-        rootState: context.rootState,
-        rootSetState: context.rootSetState,
-        context: context.context,
-        shouldEvaluateBindings: false
-    }).component?.name;
-    if (!componentName) {
-        return null;
-    }
-    const ref = registeredComponents[componentName];
-    if (!ref) {
-        // TODO: Public doc page with more info about this message
-        console.warn(`
-      Could not find a registered component named "${componentName}". 
-      If you registered it, is the file that registered it imported by the file that needs to render it?`);
-        return undefined;
-    }
-    else {
-        return ref;
-    }
-};
-export const getRepeatItemData = ({ block, context }) => {
-    /**
-     * we don't use `state.processedBlock` here because the processing done within its logic includes evaluating the block's bindings,
-     * which will not work if there is a repeat.
-     */
-    const { repeat, ...blockWithoutRepeat } = block;
-    if (!repeat?.collection) {
-        return undefined;
-    }
-    const itemsArray = evaluate({
-        code: repeat.collection,
-        localState: context.localState,
-        rootState: context.rootState,
-        rootSetState: context.rootSetState,
-        context: context.context
-    });
-    if (!Array.isArray(itemsArray)) {
-        return undefined;
-    }
-    const collectionName = repeat.collection.split('.').pop();
-    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
-    const repeatArray = itemsArray.map((item, index) => ({
-        context: {
-            ...context,
-            localState: {
-                ...context.localState,
-                $index: index,
-                $item: item,
-                [itemNameToUse]: item,
-                [`$${itemNameToUse}Index`]: index
-            }
-        },
-        block: blockWithoutRepeat
-    }));
-    return repeatArray;
-};

package/dist/components/block/block.js

@@ -1,92 +0,0 @@
-import * as React from "react";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./components/block-styles";
-import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./block.helpers.js";
-import RepeatedBlock from "./components/repeated-block";
-import ComponentRef from "./components/component-ref/component-ref";
-import BlockWrapper from "./components/block-wrapper";
-function Block(props) {
-    const blockComponent = function blockComponent() {
-        return getComponent({
-            block: props.block,
-            context: props.context,
-            registeredComponents: props.registeredComponents,
-        });
-    };
-    const repeatItem = function repeatItem() {
-        return getRepeatItemData({
-            block: props.block,
-            context: props.context,
-        });
-    };
-    const processedBlock = function processedBlock() {
-        return repeatItem()
-            ? props.block
-            : getProcessedBlock({
-                block: props.block,
-                localState: props.context.localState,
-                rootState: props.context.rootState,
-                rootSetState: props.context.rootSetState,
-                context: props.context.context,
-                shouldEvaluateBindings: true,
-            });
-    };
-    const Tag = function Tag() {
-        return props.block.tagName || "div";
-    };
-    const canShowBlock = function canShowBlock() {
-        if ("hide" in processedBlock()) {
-            return !processedBlock().hide;
-        }
-        if ("show" in processedBlock()) {
-            return processedBlock().show;
-        }
-        return true;
-    };
-    const childrenWithoutParentComponent = function childrenWithoutParentComponent() {
-        /**
-         * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-         * we render them outside of `componentRef`.
-         * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
-         * blocks, and the children will be repeated within those blocks.
-         */
-        const shouldRenderChildrenOutsideRef = !blockComponent()?.component && !repeatItem();
-        return shouldRenderChildrenOutsideRef
-            ? processedBlock().children ?? []
-            : [];
-    };
-    const componentRefProps = function componentRefProps() {
-        return {
-            blockChildren: processedBlock().children ?? [],
-            componentRef: blockComponent()?.component,
-            componentOptions: {
-                ...getBlockComponentOptions(processedBlock()),
-                builderContext: props.context,
-                ...(blockComponent()?.name === "Symbol" ||
-                    blockComponent()?.name === "Columns"
-                    ? {
-                        builderComponents: props.registeredComponents,
-                    }
-                    : {}),
-            },
-            context: childrenContext,
-            registeredComponents: props.registeredComponents,
-            builderBlock: processedBlock(),
-            includeBlockProps: blockComponent()?.noWrap === true,
-            isInteractive: !blockComponent()?.isRSC,
-        };
-    };
-    const childrenContext = props.context;
-    return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !blockComponent()?.noWrap ? (React.createElement(React.Fragment, null,
-        isEmptyHtmlElement(Tag()) ? (React.createElement(React.Fragment, null,
-            React.createElement(BlockWrapper, { Wrapper: Tag(), block: processedBlock(), context: props.context, hasChildren: false }))) : null,
-        !isEmptyHtmlElement(Tag()) && repeatItem() ? (React.createElement(React.Fragment, null, repeatItem()?.map((data, index) => (React.createElement(RepeatedBlock, { key: index, repeatContext: data.context, block: data.block, registeredComponents: props.registeredComponents }))))) : null,
-        !isEmptyHtmlElement(Tag()) && !repeatItem() ? (React.createElement(React.Fragment, null,
-            React.createElement(BlockWrapper, { Wrapper: Tag(), block: processedBlock(), context: props.context, hasChildren: true },
-                React.createElement(ComponentRef, { ...componentRefProps() }),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(Block, { key: "block-" + child.id, block: child, context: childrenContext, registeredComponents: props.registeredComponents }))),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext })))))) : null)) : (React.createElement(React.Fragment, null,
-        React.createElement(ComponentRef, { ...componentRefProps() }))))) : null));
-}
-export default Block;

package/dist/components/block/components/block-styles.js

@@ -1,65 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes.js";
-import { TARGET } from "../../../constants/target.js";
-import { getProcessedBlock } from "../../../functions/get-processed-block.js";
-import { createCssClass } from "../../../helpers/css.js";
-import { checkIsDefined } from "../../../helpers/nullable.js";
-import InlinedStyles from "../../inlined-styles";
-function BlockStyles(props) {
-    const [processedBlock, setProcessedBlock] = useState(() => getProcessedBlock({
-        block: props.block,
-        localState: props.context.localState,
-        rootState: props.context.rootState,
-        rootSetState: props.context.rootSetState,
-        context: props.context.context,
-        shouldEvaluateBindings: true,
-    }));
-    function canShowBlock() {
-        // only render styles for blocks that are visible
-        if (checkIsDefined(processedBlock.hide)) {
-            return !processedBlock.hide;
-        }
-        if (checkIsDefined(processedBlock.show)) {
-            return processedBlock.show;
-        }
-        return true;
-    }
-    function css() {
-        const styles = processedBlock.responsiveStyles;
-        const content = props.context.content;
-        const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
-        const largeStyles = styles?.large;
-        const mediumStyles = styles?.medium;
-        const smallStyles = styles?.small;
-        const className = processedBlock.id;
-        if (!className) {
-            return "";
-        }
-        const largeStylesClass = largeStyles
-            ? createCssClass({
-                className,
-                styles: largeStyles,
-            })
-            : "";
-        const mediumStylesClass = mediumStyles
-            ? createCssClass({
-                className,
-                styles: mediumStyles,
-                mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints),
-            })
-            : "";
-        const smallStylesClass = smallStyles
-            ? createCssClass({
-                className,
-                styles: smallStyles,
-                mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
-            })
-            : "";
-        return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
-    }
-    return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
-        React.createElement(InlinedStyles, { styles: css() }))) : null));
-}
-export default BlockStyles;

package/dist/components/block/components/block-wrapper.js

@@ -1,36 +0,0 @@
-"use client";
-import * as React from "react";
-import { getBlockActions } from "../../../functions/get-block-actions.js";
-import { getBlockProperties } from "../../../functions/get-block-properties.js";
-function BlockWrapper(props) {
-    return (React.createElement(React.Fragment, null,
-        " ",
-        props.hasChildren ? (React.createElement(React.Fragment, null,
-            React.createElement(props.Wrapper, { ...getBlockProperties({
-                    block: props.block,
-                    context: props.context,
-                }), ...getBlockActions({
-                    block: props.block,
-                    rootState: props.context.rootState,
-                    rootSetState: props.context.rootSetState,
-                    localState: props.context.localState,
-                    context: props.context.context,
-                    stripPrefix: true,
-                }) },
-                " ",
-                props.children,
-                " "))) : (React.createElement(React.Fragment, null,
-            React.createElement(props.Wrapper, { ...getBlockProperties({
-                    block: props.block,
-                    context: props.context,
-                }), ...getBlockActions({
-                    block: props.block,
-                    rootState: props.context.rootState,
-                    rootSetState: props.context.rootSetState,
-                    localState: props.context.localState,
-                    context: props.context.context,
-                    stripPrefix: true,
-                }) }))),
-        " "));
-}
-export default BlockWrapper;

package/dist/components/block/components/component-ref/component-ref.helpers.js

@@ -1,22 +0,0 @@
-import { getBlockProperties } from '../../../../functions/get-block-properties.js';
-export const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
-    const interactiveElementProps = {
-        Wrapper: componentRef,
-        block: builderBlock,
-        context,
-        wrapperProps: componentOptions
-    };
-    return isInteractive ? interactiveElementProps : {
-        ...componentOptions,
-        /**
-         * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
-         * component itself directly. Otherwise, they are provided to the wrapper element.
-         */
-        ...(includeBlockProps ? {
-            attributes: getBlockProperties({
-                block: builderBlock,
-                context: contextValue
-            })
-        } : {})
-    };
-};

package/dist/components/block/components/component-ref/component-ref.js

@@ -1,21 +0,0 @@
-import * as React from "react";
-import BlockStyles from "../block-styles";
-import Block from "../../block";
-import InteractiveElement from "../interactive-element";
-import { getWrapperProps } from "./component-ref.helpers.js";
-function ComponentRef(props) {
-    const Wrapper = props.isInteractive ? InteractiveElement : props.componentRef;
-    return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
-        React.createElement(Wrapper, { ...getWrapperProps({
-                componentOptions: props.componentOptions,
-                builderBlock: props.builderBlock,
-                context: props.context,
-                componentRef: props.componentRef,
-                includeBlockProps: props.includeBlockProps,
-                isInteractive: props.isInteractive,
-                contextValue: props.context,
-            }) },
-            props.blockChildren?.map((child) => (React.createElement(Block, { key: "block-" + child.id, block: child, context: props.context, registeredComponents: props.registeredComponents }))),
-            props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
-}
-export default ComponentRef;

package/dist/components/block/components/interactive-element.js

@@ -1,20 +0,0 @@
-"use client";
-import * as React from "react";
-import { getBlockActions } from "../../../functions/get-block-actions.js";
-import { getBlockProperties } from "../../../functions/get-block-properties.js";
-function InteractiveElement(props) {
-    return (React.createElement(props.Wrapper, { ...props.wrapperProps, attributes: {
-            ...getBlockProperties({
-                block: props.block,
-                context: props.context,
-            }),
-            ...getBlockActions({
-                block: props.block,
-                rootState: props.context.rootState,
-                rootSetState: props.context.rootSetState,
-                localState: props.context.localState,
-                context: props.context.context,
-            }),
-        } }, props.children));
-}
-export default InteractiveElement;

package/dist/components/block/components/repeated-block.js

@@ -1,7 +0,0 @@
-import * as React from "react";
-import Block from "../block";
-function RepeatedBlock(props) {
-    const store = props.repeatContext;
-    return (React.createElement(Block, { block: props.block, context: store, registeredComponents: props.registeredComponents }));
-}
-export default RepeatedBlock;

package/dist/components/block/types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/blocks/blocks-wrapper.js

@@ -1,38 +0,0 @@
-"use client";
-import * as React from "react";
-import { isEditing } from "../../functions/is-editing.js";
-function BlocksWrapper(props) {
-    function className() {
-        return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-    }
-    function onClick() {
-        if (isEditing() && !props.blocks?.length) {
-            window.parent?.postMessage({
-                type: "builder.clickEmptyBlocks",
-                data: {
-                    parentElementId: props.parent,
-                    dataPath: props.path,
-                },
-            }, "*");
-        }
-    }
-    function onMouseEnter() {
-        if (isEditing() && !props.blocks?.length) {
-            window.parent?.postMessage({
-                type: "builder.hoverEmptyBlocks",
-                data: {
-                    parentElementId: props.parent,
-                    dataPath: props.path,
-                },
-            }, "*");
-        }
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-5821bd52", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() }, props.children),
-        React.createElement("style", null, `.div-5821bd52 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`)));
-}
-export default BlocksWrapper;

package/dist/components/blocks/blocks.js

@@ -1,10 +0,0 @@
-import * as React from "react";
-import BlockStyles from "../block/components/block-styles";
-import Block from "../block/block";
-import BlocksWrapper from "./blocks-wrapper";
-function Blocks(props) {
-    return (React.createElement(BlocksWrapper, { blocks: props.blocks, parent: props.parent, path: props.path, styleProp: props.styleProp },
-        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(Block, { key: "render-block-" + block.id, block: block, context: props.context, registeredComponents: props.registeredComponents }))))) : null,
-        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: props.context }))))) : null));
-}
-export default Blocks;