@builder.io/sdk-react 0.1.1 → 0.1.3

package/dist/rsc/blocks/text/component-info.js

@@ -0,0 +1,22 @@
+const componentInfo = {
+    name: "Text",
+    static: true,
+    builtIn: true,
+    image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+    inputs: [
+        {
+            name: "text",
+            type: "html",
+            required: true,
+            autoFocus: true,
+            bubble: true,
+            defaultValue: "Enter some text..."
+        }
+    ],
+    defaultStyles: {
+        lineHeight: "normal",
+        height: "auto",
+        textAlign: "center"
+    }
+};
+export { componentInfo };

package/dist/rsc/blocks/text/text.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export default function Text(props) {
+    const _context = { ...props["_context"] };
+    return (React.createElement("span", { className: "builder-text", dangerouslySetInnerHTML: { __html: props.text } }));
+}

package/dist/rsc/blocks/textarea/component-info.js

@@ -0,0 +1,45 @@
+const componentInfo = {
+    name: "Form:TextArea",
+    builtIn: true,
+    image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
+    inputs: [
+        {
+            advanced: true,
+            name: "value",
+            type: "string"
+        },
+        {
+            name: "name",
+            type: "string",
+            required: true,
+            helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+        },
+        {
+            name: "defaultValue",
+            type: "string"
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            defaultValue: "Hello there"
+        },
+        {
+            name: "required",
+            type: "boolean",
+            defaultValue: false
+        }
+    ],
+    defaultStyles: {
+        paddingTop: "10px",
+        paddingBottom: "10px",
+        paddingLeft: "10px",
+        paddingRight: "10px",
+        borderRadius: "3px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "#ccc"
+    },
+    static: true,
+    noWrap: true
+};
+export { componentInfo };

package/dist/rsc/blocks/textarea/textarea.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export default function Textarea(props) {
+    const _context = { ...props["_context"] };
+    return (React.createElement("textarea", { ...props.attributes, placeholder: props.placeholder, name: props.name, value: props.value, defaultValue: props.defaultValue }));
+}

package/dist/rsc/blocks/util.js

@@ -0,0 +1,6 @@
+const serializeFn = (fnValue) => {
+    const fnStr = fnValue.toString().trim();
+    const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+    return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+export { serializeFn };

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

@@ -0,0 +1,104 @@
+const componentInfo = {
+    name: "Video",
+    canHaveChildren: true,
+    builtIn: 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: "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
+        }
+    ]
+};
+export { componentInfo };

package/dist/rsc/blocks/video/video.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+export default function Video(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        get 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,
+                    }
+                    : {}),
+            };
+        },
+        get spreadProps() {
+            return {
+                ...props.attributes,
+                ...state.videoProps,
+            };
+        },
+    };
+    return (React.createElement("video", { ...state.spreadProps, 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 }));
+}

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

@@ -0,0 +1,51 @@
+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 RenderInlinedStyles from "../render-inlined-styles.js";
+export default function BlockStyles(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        get useBlock() {
+            return getProcessedBlock({
+                block: props.block,
+                state: props.context.state,
+                context: props.context.context,
+                shouldEvaluateBindings: true,
+            });
+        },
+        get css() {
+            const styles = state.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 = state.useBlock.id;
+            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" && state.css ? (React.createElement(React.Fragment, null,
+        React.createElement(RenderInlinedStyles, { styles: state.css, _context: _context }))) : null));
+}

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

@@ -0,0 +1,104 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(b)) {
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+        if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+            target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(source)) {
+            if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+                target[prop] = source[prop];
+        }
+    return target;
+};
+import { evaluate } from "../../functions/evaluate";
+import { getProcessedBlock } from "../../functions/get-processed-block";
+const EMPTY_HTML_ELEMENTS = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "keygen",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+    return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+const getComponent = ({ block, context }) => {
+    var _a;
+    const componentName = (_a = getProcessedBlock({
+        block,
+        state: context.state,
+        context: context.context,
+        shouldEvaluateBindings: false
+    }).component) == null ? void 0 : _a.name;
+    if (!componentName) {
+        return null;
+    }
+    const ref = context.registeredComponents[componentName];
+    if (!ref) {
+        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 void 0;
+    }
+    else {
+        return ref;
+    }
+};
+const getRepeatItemData = ({ block, context }) => {
+    const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
+    if (!(repeat == null ? void 0 : repeat.collection)) {
+        return void 0;
+    }
+    const itemsArray = evaluate({
+        code: repeat.collection,
+        state: context.state,
+        context: context.context
+    });
+    if (!Array.isArray(itemsArray)) {
+        return void 0;
+    }
+    const collectionName = repeat.collection.split(".").pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+    const repeatArray = itemsArray.map((item, index) => ({
+        context: __spreadProps(__spreadValues({}, context), {
+            state: __spreadProps(__spreadValues({}, context.state), {
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index
+            })
+        }),
+        block: blockWithoutRepeat
+    }));
+    return repeatArray;
+};
+export { getComponent, getRepeatItemData, isEmptyHtmlElement };

package/dist/rsc/components/render-block/render-block.js

@@ -0,0 +1,126 @@
+import * as React 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 { getBlockTag } from "../../functions/get-block-tag.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./block-styles.js";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+import RenderRepeatedBlock from "./render-repeated-block.js";
+import { TARGET } from "../../constants/target.js";
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import RenderComponent from "./render-component.js";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+export default function RenderBlock(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        component: getComponent({
+            block: props.block,
+            context: props.context,
+        }),
+        get tag() {
+            return getBlockTag(state.useBlock);
+        },
+        get useBlock() {
+            return state.repeatItemData
+                ? props.block
+                : getProcessedBlock({
+                    block: props.block,
+                    state: props.context.state,
+                    context: props.context.context,
+                    shouldEvaluateBindings: true,
+                });
+        },
+        get actions() {
+            return getBlockActions({
+                block: state.useBlock,
+                state: props.context.state,
+                context: props.context.context,
+            });
+        },
+        get attributes() {
+            const blockProperties = getBlockProperties(state.useBlock);
+            return {
+                ...blockProperties,
+                ...(TARGET === "reactNative"
+                    ? {
+                        style: getReactNativeBlockStyles({
+                            block: state.useBlock,
+                            context: props.context,
+                            blockStyles: blockProperties.style,
+                        }),
+                    }
+                    : {}),
+            };
+        },
+        get renderComponentProps() {
+            return {
+                blockChildren: state.useBlock.children ?? [],
+                componentRef: state.component?.component,
+                componentOptions: {
+                    ...getBlockComponentOptions(state.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.
+                     */
+                    ...(!state.component?.noWrap
+                        ? {}
+                        : {
+                            attributes: {
+                                ...state.attributes,
+                                ...state.actions,
+                            },
+                        }),
+                    customBreakpoints: state.childrenContext?.content?.meta?.breakpoints,
+                },
+                context: state.childrenContext,
+            };
+        },
+        get 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 = !state.component?.component && !state.repeatItemData;
+            return shouldRenderChildrenOutsideRef
+                ? state.useBlock.children ?? []
+                : [];
+        },
+        repeatItemData: getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        }),
+        get childrenContext() {
+            const getInheritedTextStyles = () => {
+                if (TARGET !== "reactNative") {
+                    return {};
+                }
+                return extractTextStyles(getReactNativeBlockStyles({
+                    block: state.useBlock,
+                    context: props.context,
+                    blockStyles: state.attributes.style,
+                }));
+            };
+            return {
+                apiKey: props.context.apiKey,
+                state: props.context.state,
+                content: props.context.content,
+                context: props.context.context,
+                registeredComponents: props.context.registeredComponents,
+                inheritedStyles: getInheritedTextStyles(),
+            };
+        },
+    };
+    const TagRef = state.tag;
+    return (React.createElement(React.Fragment, null, !state.component?.noWrap ? (React.createElement(React.Fragment, null,
+        isEmptyHtmlElement(state.tag) ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...state.attributes, ...state.actions }))) : null,
+        !isEmptyHtmlElement(state.tag) && state.repeatItemData ? (React.createElement(React.Fragment, null, state.repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block, _context: _context }))))) : null,
+        !isEmptyHtmlElement(state.tag) && !state.repeatItemData ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...state.attributes, ...state.actions },
+                React.createElement(RenderComponent, { ...state.renderComponentProps, _context: _context }),
+                state.childrenWithoutParentComponent?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: state.childrenContext, _context: _context }))),
+                state.childrenWithoutParentComponent?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: state.childrenContext, _context: _context })))))) : null)) : (React.createElement(RenderComponent, { ...state.renderComponentProps, _context: _context }))));
+}

package/dist/rsc/components/render-block/render-component-with-context.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderComponent from "./render-component.js";
+export default function RenderComponentWithContext(props) {
+    const _context = { ...props["_context"] };
+    _context.BuilderContext = {
+        get content() {
+            return props.context.content;
+        },
+        get state() {
+            return props.context.state;
+        },
+        get context() {
+            return props.context.context;
+        },
+        get apiKey() {
+            return props.context.apiKey;
+        },
+        get registeredComponents() {
+            return props.context.registeredComponents;
+        },
+        get inheritedStyles() {
+            return props.context.inheritedStyles;
+        },
+    };
+    return (React.createElement(RenderComponent, { componentRef: props.componentRef, componentOptions: props.componentOptions, blockChildren: props.blockChildren, context: props.context, _context: _context }));
+}

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

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

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderBlock from "./render-block.js";
+export default function RenderRepeatedBlock(props) {
+    const _context = { ...props["_context"] };
+    _context.BuilderContext = {
+        content: props.repeatContext.content,
+        state: props.repeatContext.state,
+        context: props.repeatContext.context,
+        apiKey: props.repeatContext.apiKey,
+        registeredComponents: props.repeatContext.registeredComponents,
+        inheritedStyles: props.repeatContext.inheritedStyles,
+    };
+    return (React.createElement(RenderBlock, { block: props.block, context: props.repeatContext, _context: _context }));
+}

package/dist/rsc/components/render-block/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import BuilderContext from "../context/builder.context.js";
+import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.js";
+import RenderBlock from "./render-block/render-block.js";
+export default function RenderBlocks(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        get className() {
+            return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+        },
+        onClick() {
+            if (isEditing() && !props.blocks?.length) {
+                window.parent?.postMessage({
+                    type: "builder.clickEmptyBlocks",
+                    data: {
+                        parentElementId: props.parent,
+                        dataPath: props.path,
+                    },
+                }, "*");
+            }
+        },
+        onMouseEnter() {
+            if (isEditing() && !props.blocks?.length) {
+                window.parent?.postMessage({
+                    type: "builder.hoverEmptyBlocks",
+                    data: {
+                        parentElementId: props.parent,
+                        dataPath: props.path,
+                    },
+                }, "*");
+            }
+        },
+    };
+    const builderContext = _context["BuilderContext"];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: state.className + " div-4f307ff9", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+                class: state.className,
+            }, style: props.styleProp },
+            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext, _context: _context }))))) : null,
+            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext, _context: _context }))))) : null),
+        React.createElement("style", null, `.div-4f307ff9 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+}`)));
+}

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+export default function BuilderEditing(props) {
+    const _context = { ...props["_context"] };
+    return React.createElement("div", null);
+}