@builder.io/sdk-react 0.4.5 → 0.5.0

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

@@ -1,66 +0,0 @@
-'use client';
-import * as React 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) {
-    function useBlock() {
-        return 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(useBlock().hide)) {
-            return !useBlock().hide;
-        }
-        if (checkIsDefined(useBlock().show)) {
-            return useBlock().show;
-        }
-        return true;
-    }
-    function css() {
-        const styles = useBlock().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 = useBlock().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/sdk/components/render-block/render-block.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export type RenderBlockProps = {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-};
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-declare function RenderBlock(props: RenderBlockProps): JSX.Element;
-export default RenderBlock;

package/dist/sdk/components/render-block/render-block.helpers.d.ts

@@ -1,12 +0,0 @@
-import type { BuilderContextInterface } from '../../context/types';
-import type { BuilderBlock } from '../../types/builder-block';
-import type { RepeatData } from './types';
-export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
-export declare const getComponent: ({ block, context, }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-}) => import("../../context/types").RegisteredComponent;
-export declare const getRepeatItemData: ({ block, context, }: {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-}) => RepeatData[] | undefined;

package/dist/sdk/components/render-block/render-block.helpers.js

@@ -1,86 +0,0 @@
-import { evaluate } from '../../functions/evaluate';
-import { getProcessedBlock } from '../../functions/get-processed-block';
-/**
- * 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, }) => {
-    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 = context.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.useBlock` 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/sdk/components/render-block/render-block.js

@@ -1,115 +0,0 @@
-'use client';
-import * as React from "react";
-import { useState } from "react";
-import { getBlockActions } from "../../functions/get-block-actions.js";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles";
-import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block";
-import { TARGET } from "../../constants/target.js";
-import RenderComponent from "./render-component";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-function RenderBlock(props) {
-    const [component, setComponent] = useState(() => getComponent({
-        block: props.block,
-        context: props.context,
-    }));
-    function repeatItem() {
-        return getRepeatItemData({
-            block: props.block,
-            context: props.context,
-        });
-    }
-    function useBlock() {
-        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, setTag] = useState(() => props.block.tagName || "div");
-    function canShowBlock() {
-        if ("hide" in useBlock()) {
-            return !useBlock().hide;
-        }
-        if ("show" in useBlock()) {
-            return useBlock().show;
-        }
-        return true;
-    }
-    function actions() {
-        return getBlockActions({
-            block: useBlock(),
-            rootState: props.context.rootState,
-            rootSetState: props.context.rootSetState,
-            localState: props.context.localState,
-            context: props.context.context,
-        });
-    }
-    function attributes() {
-        const blockProperties = getBlockProperties(useBlock());
-        return {
-            ...blockProperties,
-            ...(TARGET === "reactNative"
-                ? {
-                    style: getReactNativeBlockStyles({
-                        block: useBlock(),
-                        context: props.context,
-                        blockStyles: blockProperties.style,
-                    }),
-                }
-                : {}),
-        };
-    }
-    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 = !component?.component && !repeatItem();
-        return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
-    }
-    function renderComponentProps() {
-        return {
-            blockChildren: useBlock().children ?? [],
-            componentRef: component?.component,
-            componentOptions: {
-                ...getBlockComponentOptions(useBlock()),
-                /**
-                 * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-                 * they are provided to the component itself directly.
-                 */
-                ...(!component?.noWrap
-                    ? {}
-                    : {
-                        attributes: {
-                            ...attributes(),
-                            ...actions(),
-                        },
-                    }),
-            },
-            context: childrenContext,
-        };
-    }
-    const [childrenContext, setChildrenContext] = useState(() => props.context);
-    return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
-        isEmptyHtmlElement(Tag) ? (React.createElement(React.Fragment, null,
-            React.createElement(Tag, { ...attributes(), ...actions() }))) : null,
-        !isEmptyHtmlElement(Tag) && repeatItem() ? (React.createElement(React.Fragment, null, repeatItem()?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !isEmptyHtmlElement(Tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
-            React.createElement(Tag, { ...attributes(), ...actions() },
-                React.createElement(RenderComponent, { ...renderComponentProps() }),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext }))),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext })))))) : null)) : (React.createElement(React.Fragment, null,
-        React.createElement(RenderComponent, { ...renderComponentProps() }))))) : null));
-}
-export default RenderBlock;

package/dist/sdk/components/render-block/render-component.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-type ComponentOptions = {
-    [index: string]: any;
-    attributes?: {
-        [index: string]: any;
-    };
-};
-export interface RenderComponentProps {
-    componentRef: any;
-    componentOptions: ComponentOptions;
-    blockChildren: BuilderBlock[];
-    context: BuilderContextInterface;
-}
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { BuilderContextInterface } from "../../context/types.js";
-declare function RenderComponent(props: RenderComponentProps): JSX.Element;
-export default RenderComponent;

package/dist/sdk/components/render-block/render-component.js

@@ -1,11 +0,0 @@
-'use client';
-import * as React from "react";
-import BlockStyles from "./block-styles";
-import RenderBlock from "./render-block";
-function RenderComponent(props) {
-    return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
-        React.createElement(props.componentRef, { ...props.componentOptions },
-            props.blockChildren?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: props.context }))),
-            props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
-}
-export default RenderComponent;

package/dist/sdk/components/render-block/render-repeated-block.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    block: BuilderBlock;
-    repeatContext: BuilderContextInterface;
-};
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block";
-declare function RenderRepeatedBlock(props: Props): JSX.Element;
-export default RenderRepeatedBlock;

package/dist/sdk/components/render-block/render-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 RenderBlock from "./render-block";
-function RenderRepeatedBlock(props) {
-    const [store, setStore] = useState(() => props.repeatContext);
-    return (React.createElement(BuilderContext.Provider, { value: store },
-        React.createElement(RenderBlock, { block: props.block, context: store })));
-}
-export default RenderRepeatedBlock;

package/dist/sdk/components/render-block/types.d.ts

@@ -1,6 +0,0 @@
-import type { BuilderContextInterface } from '../../context/types.js';
-import type { BuilderBlock } from '../../types/builder-block.js';
-export interface RepeatData {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-}

package/dist/sdk/components/render-blocks.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type RenderBlockProps = {
-    blocks?: BuilderBlock[];
-    parent?: string;
-    path?: string;
-    styleProp?: Record<string, any>;
-};
-import type { BuilderBlock } from "../types/builder-block.js";
-declare function RenderBlocks(props: RenderBlockProps): JSX.Element;
-export default RenderBlocks;

package/dist/sdk/components/render-blocks.js

@@ -1,45 +0,0 @@
-'use client';
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../context/builder.context.js";
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles";
-import RenderBlock from "./render-block/render-block";
-function RenderBlocks(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,
-                },
-            }, "*");
-        }
-    }
-    const builderContext = useContext(BuilderContext);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-6dd9939e", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() },
-            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
-            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
-        React.createElement("style", null, `.div-6dd9939e {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`)));
-}
-export default RenderBlocks;

package/dist/sdk/components/render-content/builder-editing.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function BuilderEditing(props: any): JSX.Element;
-export default BuilderEditing;

package/dist/sdk/components/render-content/builder-editing.js

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

package/dist/sdk/components/render-content/components/render-styles.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    cssCode?: string;
-    customFonts?: CustomFont[];
-    contentId?: string;
-}
-import type { CustomFont } from "./render-styles.helpers";
-declare function RenderContentStyles(props: Props): JSX.Element;
-export default RenderContentStyles;

package/dist/sdk/components/render-content/components/render-styles.helpers.d.ts

@@ -1,15 +0,0 @@
-export interface CustomFont {
-    family?: string;
-    kind?: string;
-    fileUrl?: string;
-    files?: {
-        [key: string]: string;
-    };
-}
-export declare const getFontCss: ({ customFonts }: {
-    customFonts?: CustomFont[];
-}) => string;
-export declare const getCss: ({ cssCode, contentId, }: {
-    cssCode?: string;
-    contentId?: string;
-}) => string;

package/dist/sdk/components/render-content/components/render-styles.helpers.js

@@ -1,59 +0,0 @@
-const getCssFromFont = (font) => {
-    // TODO: compute what font sizes are used and only load those.......
-    const family = font.family +
-        (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-    const name = family.split(',')[0];
-    const url = font.fileUrl ?? font?.files?.regular;
-    let str = '';
-    if (url && family && name) {
-        str += `
-@font-face {
-font-family: "${family}";
-src: local("${name}"), url('${url}') format('woff2');
-font-display: fallback;
-font-weight: 400;
-}
-      `.trim();
-    }
-    if (font.files) {
-        for (const weight in font.files) {
-            const isNumber = String(Number(weight)) === weight;
-            if (!isNumber) {
-                continue;
-            }
-            // TODO: maybe limit number loaded
-            const weightUrl = font.files[weight];
-            if (weightUrl && weightUrl !== url) {
-                str += `
-@font-face {
-font-family: "${family}";
-src: url('${weightUrl}') format('woff2');
-font-display: fallback;
-font-weight: ${weight};
-}
-        `.trim();
-            }
-        }
-    }
-    return str;
-};
-export const getFontCss = ({ customFonts }) => {
-    // TODO: flag for this
-    // if (!this.builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
-};
-export const getCss = ({ cssCode, contentId, }) => {
-    if (!cssCode) {
-        return '';
-    }
-    if (!contentId) {
-        return cssCode;
-    }
-    // Allow using `&` in custom CSS code like @emotion
-    // E.g. `& .foobar { ... }` to scope CSS
-    // TODO: handle if '&' is within a string like `content: "&"`
-    return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
-};

package/dist/sdk/components/render-content/components/render-styles.js

@@ -1,32 +0,0 @@
-'use client';
-import * as React from "react";
-import { useState } from "react";
-import InlinedStyles from "../../inlined-styles";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
-function RenderContentStyles(props) {
-    const [injectedStyles, setInjectedStyles] = useState(() => `
-${getCss({
-        cssCode: props.cssCode,
-        contentId: props.contentId,
-    })}
-${getFontCss({
-        customFonts: props.customFonts,
-    })}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-  margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-  text-align: inherit;
-  font-family: inherit;
-}
-`.trim());
-    return React.createElement(InlinedStyles, { styles: injectedStyles });
-}
-export default RenderContentStyles;

package/dist/sdk/components/render-content/index.d.ts

@@ -1 +0,0 @@
-export { default } from './render-content';

package/dist/sdk/components/render-content/index.js

@@ -1 +0,0 @@
-export { default } from './render-content';

package/dist/sdk/components/render-content/render-content.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { RenderContentProps } from "./render-content.types.js";
-declare function RenderContent(props: RenderContentProps): JSX.Element;
-export default RenderContent;

package/dist/sdk/components/render-content/render-content.helpers.d.ts

@@ -1,7 +0,0 @@
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { RenderContentProps } from './render-content.types';
-export declare const getContextStateInitialValue: ({ content, data, locale, }: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
-    [x: string]: unknown;
-};
-export declare const getContentInitialValue: ({ content, data, }: Pick<RenderContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/dist/sdk/components/render-content/render-content.helpers.js

@@ -1,30 +0,0 @@
-export const getContextStateInitialValue = ({ content, data, locale, }) => {
-    const defaultValues = {};
-    // set default values for content state inputs
-    content?.data?.inputs?.forEach((input) => {
-        if (input.name &&
-            input.defaultValue !== undefined &&
-            content?.data?.state &&
-            content.data.state[input.name] === undefined) {
-            defaultValues[input.name] = input.defaultValue;
-        }
-    });
-    const stateToUse = {
-        ...content?.data?.state,
-        ...data,
-        ...(locale ? { locale } : {}),
-    };
-    return { ...defaultValues, ...stateToUse };
-};
-export const getContentInitialValue = ({ content, data, }) => {
-    return !content
-        ? undefined
-        : {
-            ...content,
-            data: {
-                ...content?.data,
-                ...data,
-            },
-            meta: content?.meta,
-        };
-};