@builder.io/sdk-react 0.1.2 → 0.1.3

package/dist/react/blocks/video/video.js

@@ -0,0 +1,48 @@
+import * as React from "react";
+export default 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(), 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/react/components/render-block/block-styles.js

@@ -0,0 +1,48 @@
+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) {
+    function useBlock() {
+        return getProcessedBlock({
+            block: props.block,
+            state: props.context.state,
+            context: props.context.context,
+            shouldEvaluateBindings: 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;
+        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() ? (React.createElement(React.Fragment, null,
+        React.createElement(RenderInlinedStyles, { styles: css() }))) : null));
+}

package/dist/react/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/react/components/render-block/render-block.js

@@ -0,0 +1,122 @@
+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 { 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 [component, setComponent] = useState(() => getComponent({
+        block: props.block,
+        context: props.context,
+    }));
+    function tag() {
+        return getBlockTag(useBlock());
+    }
+    function useBlock() {
+        return repeatItemData
+            ? props.block
+            : getProcessedBlock({
+                block: props.block,
+                state: props.context.state,
+                context: props.context.context,
+                shouldEvaluateBindings: true,
+            });
+    }
+    function actions() {
+        return getBlockActions({
+            block: useBlock(),
+            state: props.context.state,
+            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 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(),
+                        },
+                    }),
+                customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
+            },
+            context: childrenContext(),
+        };
+    }
+    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 && !repeatItemData;
+        return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
+    }
+    const [repeatItemData, setRepeatItemData] = useState(() => getRepeatItemData({
+        block: props.block,
+        context: props.context,
+    }));
+    function childrenContext() {
+        const getInheritedTextStyles = () => {
+            if (TARGET !== "reactNative") {
+                return {};
+            }
+            return extractTextStyles(getReactNativeBlockStyles({
+                block: useBlock(),
+                context: props.context,
+                blockStyles: 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 = tag();
+    return (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
+        isEmptyHtmlElement(tag()) ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
+        !isEmptyHtmlElement(tag()) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !isEmptyHtmlElement(tag()) && !repeatItemData ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...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(RenderComponent, { ...renderComponentProps() }))));
+}

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useContext } from "react";
+import BuilderContext from "../../context/builder.context.js";
+import RenderComponent from "./render-component.js";
+export default function RenderComponentWithContext(props) {
+    return (React.createElement(BuilderContext.Provider, { value: {
+            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;
+            },
+        } },
+        React.createElement(RenderComponent, { componentRef: props.componentRef, componentOptions: props.componentOptions, blockChildren: props.blockChildren, context: props.context })));
+}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import BlockStyles from "./block-styles.js";
+import RenderBlock from "./render-block.js";
+export default function RenderComponent(props) {
+    const ComponentRefRef = props.componentRef;
+    return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
+        React.createElement(ComponentRefRef, { ...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));
+}

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

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

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

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

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

@@ -0,0 +1,45 @@
+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.js";
+import RenderBlock from "./render-block/render-block.js";
+export default 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-05727d92", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+                class: className(),
+            }, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
+            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-05727d92 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+}`)));
+}

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

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

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import RenderInlinedStyles from "../../render-inlined-styles.js";
+export default function RenderContentStyles(props) {
+    function 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;
+    }
+    function getFontCss({ customFonts }) {
+        // TODO: flag for this
+        // if (!builder.allowCustomFonts) {
+        //   return '';
+        // }
+        // TODO: separate internal data from external
+        return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+    }
+    function injectedStyles() {
+        return `
+${props.cssCode || ""}
+${getFontCss({
+            customFonts: props.customFonts,
+        })}`;
+    }
+    return React.createElement(RenderInlinedStyles, { styles: injectedStyles() });
+}

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

@@ -0,0 +1,2 @@
+import { default as default2 } from "./render-content.js";
+export { default2 as default };