@builder.io/sdk-react 0.5.9 → 0.6.1

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,94 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } 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) {
-    function blockComponent() {
-        return getComponent({
-            block: props.block,
-            context: props.context,
-            registeredComponents: props.registeredComponents,
-        });
-    }
-    function repeatItem() {
-        return getRepeatItemData({
-            block: props.block,
-            context: props.context,
-        });
-    }
-    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,
-            });
-    }
-    function Tag() {
-        return props.block.tagName || "div";
-    }
-    function canShowBlock() {
-        if ("hide" in processedBlock()) {
-            return !processedBlock().hide;
-        }
-        if ("show" in processedBlock()) {
-            return processedBlock().show;
-        }
-        return true;
-    }
-    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 ?? []
-            : [];
-    }
-    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, setChildrenContext] = useState(() => 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,23 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } 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, setWrapper] = useState(() => 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,11 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import BuilderContext from "../../../context/builder.context.js";
-import Block from "../block";
-function RepeatedBlock(props) {
-    const [store, setStore] = useState(() => props.repeatContext);
-    return (React.createElement(BuilderContext.Provider, { value: store },
-        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,17 +0,0 @@
-"use client";
-import * as React from "react";
-import { useContext } from "react";
-import BlockStyles from "../block/components/block-styles";
-import Block from "../block/block";
-import BlocksWrapper from "./blocks-wrapper";
-import BuilderContext from "../../context/builder.context.js";
-import ComponentsContext from "../../context/components.context.js";
-function Blocks(props) {
-    const builderContext = useContext(BuilderContext);
-    const componentsContext = useContext(ComponentsContext);
-    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 || builderContext, registeredComponents: props.registeredComponents ||
-                componentsContext.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 || builderContext }))))) : null));
-}
-export default Blocks;