@builder.io/sdk-react 0.1.1 → 0.1.3

package/dist/react/index.js

@@ -0,0 +1,12 @@
+export * from "./index-helpers/top-of-file.js";
+import "./scripts/init-editing.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";
+import { track } from "./functions/track/index.js";
+export { track };

package/dist/react/scripts/init-editing.js

@@ -0,0 +1,93 @@
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "../functions/is-browser.js";
+import { register } from "../functions/register.js";
+const registerInsertMenu = () => {
+    register("insertMenu", {
+        name: "_default",
+        default: true,
+        items: [
+            { name: "Box" },
+            { name: "Text" },
+            { name: "Image" },
+            { name: "Columns" },
+            ...TARGET === "reactNative" ? [] : [
+                { name: "Core:Section" },
+                { name: "Core:Button" },
+                { name: "Embed" },
+                { name: "Custom Code" }
+            ]
+        ]
+    });
+};
+let isSetupForEditing = false;
+const setupBrowserForEditing = (options = {}) => {
+    var _a, _b;
+    if (isSetupForEditing) {
+        return;
+    }
+    isSetupForEditing = true;
+    if (isBrowser()) {
+        (_a = window.parent) == null ? void 0 : _a.postMessage({
+            type: "builder.sdkInfo",
+            data: {
+                target: TARGET,
+                supportsPatchUpdates: false,
+                supportsAddBlockScoping: true,
+                supportsCustomBreakpoints: true
+            }
+        }, "*");
+        (_b = window.parent) == null ? void 0 : _b.postMessage({
+            type: "builder.updateContent",
+            data: {
+                options
+            }
+        }, "*");
+        window.addEventListener("message", ({ data }) => {
+            var _a2, _b2;
+            if (!(data == null ? void 0 : data.type)) {
+                return;
+            }
+            switch (data.type) {
+                case "builder.evaluate": {
+                    const text = data.data.text;
+                    const args = data.data.arguments || [];
+                    const id = data.data.id;
+                    const fn = new Function(text);
+                    let result;
+                    let error = null;
+                    try {
+                        result = fn.apply(null, args);
+                    }
+                    catch (err) {
+                        error = err;
+                    }
+                    if (error) {
+                        (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+                            type: "builder.evaluateError",
+                            data: { id, error: error.message }
+                        }, "*");
+                    }
+                    else {
+                        if (result && typeof result.then === "function") {
+                            result.then((finalResult) => {
+                                var _a3;
+                                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
+                                    type: "builder.evaluateResult",
+                                    data: { id, result: finalResult }
+                                }, "*");
+                            }).catch(console.error);
+                        }
+                        else {
+                            (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
+                                type: "builder.evaluateResult",
+                                data: { result, id }
+                            }, "*");
+                        }
+                    }
+                    break;
+                }
+            }
+        });
+    }
+};
+export { registerInsertMenu, setupBrowserForEditing };

package/dist/react/types/builder-block.js

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

package/dist/react/types/builder-content.js

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

package/dist/react/types/can-track.js

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

package/dist/react/types/components.js

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

package/dist/react/types/deep-partial.js

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

package/dist/react/types/element.js

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

package/dist/react/types/targets.js

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

package/dist/react/types/typescript.js

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

package/dist/rsc/blocks/BaseText.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import BuilderContext from "../context/builder.context.js";
+export default function BaseText(props) {
+    const _context = { ...props["_context"] };
+    const builderContext = _context["BuilderContext"];
+    return React.createElement("span", { style: builderContext.inheritedStyles }, props.text);
+}

package/dist/rsc/blocks/button/button.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+export default function Button(props) {
+    const _context = { ...props["_context"] };
+    return (React.createElement(React.Fragment, null,
+        props.link ? (React.createElement(React.Fragment, null,
+            React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement("button", { className: "button-12870b9c", ...props.attributes }, props.text)),
+        React.createElement("style", null, `.button-12870b9c {
+all: unset;
+}`)));
+}

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

@@ -0,0 +1,39 @@
+const componentInfo = {
+    name: "Core:Button",
+    builtIn: true,
+    image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+    defaultStyles: {
+        appearance: "none",
+        paddingTop: "15px",
+        paddingBottom: "15px",
+        paddingLeft: "25px",
+        paddingRight: "25px",
+        backgroundColor: "#000000",
+        color: "white",
+        borderRadius: "4px",
+        textAlign: "center",
+        cursor: "pointer"
+    },
+    inputs: [
+        {
+            name: "text",
+            type: "text",
+            defaultValue: "Click me!",
+            bubble: true
+        },
+        {
+            name: "link",
+            type: "url",
+            bubble: true
+        },
+        {
+            name: "openLinkInNewTab",
+            type: "boolean",
+            defaultValue: false,
+            friendlyName: "Open link in new tab"
+        }
+    ],
+    static: true,
+    noWrap: true
+};
+export { componentInfo };

package/dist/rsc/blocks/columns/columns.js

@@ -0,0 +1,136 @@
+import * as React from "react";
+import RenderBlocks from "../../components/render-blocks.js";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import { TARGET } from "../../constants/target.js";
+import { convertStyleMapToCSS } from "../../helpers/css";
+export default function Columns(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        getGutterSize() {
+            return typeof props.space === "number" ? props.space || 0 : 20;
+        },
+        getColumns() {
+            return props.columns || [];
+        },
+        getWidth(index) {
+            const columns = state.getColumns();
+            return columns[index]?.width || 100 / columns.length;
+        },
+        getColumnCssWidth(index) {
+            const columns = state.getColumns();
+            const gutterSize = state.getGutterSize();
+            const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+            return `calc(${state.getWidth(index)}% - ${subtractWidth}px)`;
+        },
+        maybeApplyForTablet(prop) {
+            const _stackColumnsAt = props.stackColumnsAt || "tablet";
+            return _stackColumnsAt === "tablet" ? prop : "inherit";
+        },
+        get columnsCssVars() {
+            const flexDir = props.stackColumnsAt === "never"
+                ? "inherit"
+                : props.reverseColumnsWhenStacked
+                    ? "column-reverse"
+                    : "column";
+            return {
+                "--flex-dir": flexDir,
+                "--flex-dir-tablet": state.maybeApplyForTablet(flexDir),
+            };
+        },
+        get columnCssVars() {
+            const width = "100%";
+            const marginLeft = "0";
+            return {
+                "--column-width": width,
+                "--column-margin-left": marginLeft,
+                "--column-width-tablet": state.maybeApplyForTablet(width),
+                "--column-margin-left-tablet": state.maybeApplyForTablet(marginLeft),
+            };
+        },
+        getWidthForBreakpointSize(size) {
+            const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+            return breakpointSizes[size].max;
+        },
+        get columnStyleObjects() {
+            return {
+                columns: {
+                    small: {
+                        flexDirection: "var(--flex-dir)",
+                        alignItems: "stretch",
+                    },
+                    medium: {
+                        flexDirection: "var(--flex-dir-tablet)",
+                        alignItems: "stretch",
+                    },
+                },
+                column: {
+                    small: {
+                        width: "var(--column-width) !important",
+                        marginLeft: "var(--column-margin-left) !important",
+                    },
+                    medium: {
+                        width: "var(--column-width-tablet) !important",
+                        marginLeft: "var(--column-margin-left-tablet) !important",
+                    },
+                },
+            };
+        },
+        get columnsStyles() {
+            return `
+      @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(state.columnStyleObjects.columns.medium)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
+        }
+      }
+
+      @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
+        }
+      },
+    `;
+        },
+        get reactNativeColumnsStyles() {
+            return this.columnStyleObjects.columns.small;
+        },
+        get reactNativeColumnStyles() {
+            return this.columnStyleObjects.column.small;
+        },
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
+                " div-540739f0", style: {
+                ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
+                ...state.columnsCssVars,
+            } },
+            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                React.createElement(RenderInlinedStyles, { styles: state.columnsStyles, _context: _context }))) : null,
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-540739f0-2", style: {
+                    width: state.getColumnCssWidth(index),
+                    marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
+                    ...(TARGET === "reactNative"
+                        ? state.reactNativeColumnStyles
+                        : {}),
+                    ...state.columnCssVars,
+                }, key: index },
+                React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
+                        flexGrow: "1",
+                    }, _context: _context }))))),
+        React.createElement("style", null, `.div-540739f0 {
+display: flex;
+line-height: normal;
+}.div-540739f0-2 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+}`)));
+}

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

@@ -0,0 +1,241 @@
+import { serializeFn } from "../util.js";
+const componentInfo = {
+    name: "Columns",
+    builtIn: true,
+    inputs: [
+        {
+            name: "columns",
+            type: "array",
+            broadcast: true,
+            subFields: [
+                {
+                    name: "blocks",
+                    type: "array",
+                    hideFromUI: true,
+                    defaultValue: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    name: "width",
+                    type: "number",
+                    hideFromUI: true,
+                    helperText: "Width %, e.g. set to 50 to fill half of the space"
+                },
+                {
+                    name: "link",
+                    type: "url",
+                    helperText: "Optionally set a url that clicking this column will link to"
+                }
+            ],
+            defaultValue: [
+                {
+                    blocks: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    blocks: [
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto",
+                                    minHeight: "20px",
+                                    minWidth: "20px",
+                                    overflow: "hidden"
+                                }
+                            },
+                            component: {
+                                name: "Image",
+                                options: {
+                                    image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                                    backgroundPosition: "center",
+                                    backgroundSize: "cover",
+                                    aspectRatio: 0.7004048582995948
+                                }
+                            }
+                        },
+                        {
+                            "@type": "@builder.io/sdk:Element",
+                            responsiveStyles: {
+                                large: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    alignItems: "stretch",
+                                    flexShrink: "0",
+                                    position: "relative",
+                                    marginTop: "30px",
+                                    textAlign: "center",
+                                    lineHeight: "normal",
+                                    height: "auto"
+                                }
+                            },
+                            component: {
+                                name: "Text",
+                                options: {
+                                    text: "<p>Enter some text...</p>"
+                                }
+                            }
+                        }
+                    ]
+                }
+            ],
+            onChange: serializeFn((options) => {
+                function clearWidths() {
+                    columns.forEach((col) => {
+                        col.delete("width");
+                    });
+                }
+                const columns = options.get("columns");
+                if (Array.isArray(columns)) {
+                    const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+                    if (containsColumnWithWidth) {
+                        const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+                        if (containsColumnWithoutWidth) {
+                            clearWidths();
+                        }
+                        else {
+                            const sumWidths = columns.reduce((memo, col) => {
+                                return memo + col.get("width");
+                            }, 0);
+                            const widthsDontAddUp = sumWidths !== 100;
+                            if (widthsDontAddUp) {
+                                clearWidths();
+                            }
+                        }
+                    }
+                }
+            })
+        },
+        {
+            name: "space",
+            type: "number",
+            defaultValue: 20,
+            helperText: "Size of gap between columns",
+            advanced: true
+        },
+        {
+            name: "stackColumnsAt",
+            type: "string",
+            defaultValue: "tablet",
+            helperText: "Convert horizontal columns to vertical at what device size",
+            enum: ["tablet", "mobile", "never"],
+            advanced: true
+        },
+        {
+            name: "reverseColumnsWhenStacked",
+            type: "boolean",
+            defaultValue: false,
+            helperText: "When stacking columns for mobile devices, reverse the ordering",
+            advanced: true
+        }
+    ]
+};
+export { componentInfo };

package/dist/rsc/blocks/custom-code/component-info.js

@@ -0,0 +1,29 @@
+const componentInfo = {
+    name: "Custom Code",
+    static: true,
+    builtIn: true,
+    requiredPermissions: ["editCode"],
+    inputs: [
+        {
+            name: "code",
+            type: "html",
+            required: true,
+            defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+            code: true
+        },
+        {
+            name: "replaceNodes",
+            type: "boolean",
+            helperText: "Preserve server rendered dom nodes",
+            advanced: true
+        },
+        {
+            name: "scriptsClientOnly",
+            type: "boolean",
+            defaultValue: false,
+            helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+            advanced: true
+        }
+    ]
+};
+export { componentInfo };

package/dist/rsc/blocks/custom-code/custom-code.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+export default function CustomCode(props) {
+    const _context = { ...props["_context"] };
+    const state = {
+        scriptsInserted: [],
+        scriptsRun: [],
+        findAndRunScripts() {
+            // TODO: Move this function to standalone one in '@builder.io/utils'
+            if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
+                const scripts = elem.getElementsByTagName("script");
+                for (let i = 0; i < scripts.length; i++) {
+                    const script = scripts[i];
+                    if (script.src) {
+                        if (state.scriptsInserted.includes(script.src)) {
+                            continue;
+                        }
+                        state.scriptsInserted.push(script.src);
+                        const newScript = document.createElement("script");
+                        newScript.async = true;
+                        newScript.src = script.src;
+                        document.head.appendChild(newScript);
+                    }
+                    else if (!script.type ||
+                        [
+                            "text/javascript",
+                            "application/javascript",
+                            "application/ecmascript",
+                        ].includes(script.type)) {
+                        if (state.scriptsRun.includes(script.innerText)) {
+                            continue;
+                        }
+                        try {
+                            state.scriptsRun.push(script.innerText);
+                            new Function(script.innerText)();
+                        }
+                        catch (error) {
+                            console.warn("`CustomCode`: Error running script:", error);
+                        }
+                    }
+                }
+            }
+        },
+    };
+    return (React.createElement("div", { className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
+}