@builder.io/sdk-react 0.5.9 → 0.6.0

package/types/constants/sdk-version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.6.0";

package/types/functions/deopt.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export declare function deoptSignal<T>(value: T): T;

package/types/functions/evaluate/edge-runtime/edge-runtime.d.ts

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInEdge: ({ builder, context, event, rootState, localState, rootSetState, code }: ExecutorArgs) => any;

package/types/functions/evaluate/edge-runtime/index.d.ts

@@ -0,0 +1 @@
+export { runInEdge as evaluator } from './edge-runtime.js';

package/types/functions/evaluate/placeholder-runtime.d.ts

@@ -0,0 +1,2 @@
+import type { ExecutorArgs } from './helpers.js';
+export declare const evaluator: (_args: ExecutorArgs) => never;

package/{dist → types}/functions/fetch-builder-props.d.ts

@@ -33,7 +33,8 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
     searchParams?: undefined;
 });
 /**
- * Fetches builder content, and returns it along with sensible defaults for other props that `Content` needs to render.
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
  */
 export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 export {};

package/{dist → types}/functions/get-content/index.d.ts

@@ -5,17 +5,16 @@ import type { GetContentOptions } from './types.js';
  */
 export declare function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null>;
 /**
- * @deprecated
- * Consider using `fetchBuilderProps` instead for easier setup.
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
  *
- * NOTE: `getContent` was renamed to `fetchOneEntry` and will be removed in a future release.
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
  */
 export declare const getContent: typeof fetchOneEntry;
 type ContentResults = {
     results: BuilderContent[];
 };
 /**
- * Exported only for testing purposes. Should not be used directly.
+ * @internal Exported only for testing purposes. Do not use.
  */
 export declare const _processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<ContentResults>;
 /**
@@ -23,7 +22,7 @@ export declare const _processContentResult: (options: GetContentOptions, content
  */
 export declare function fetchEntries(options: GetContentOptions): Promise<ContentResults>;
 /**
- * @deprecated Use `fetchEntries` instead.
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
  */
 export declare const getAllContent: typeof fetchEntries;
 export {};

package/types/functions/is-edge-runtime.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export declare function isEdgeRuntime(): boolean;

package/{dist → types}/index-helpers/blocks-exports.d.ts

@@ -10,10 +10,10 @@ import { default as Blocks } from '../components/blocks/blocks';
 import { default as Content } from '../components/content-variants/content-variants';
 export { Blocks, Content };
 /**
- * @deprecated Use `Blocks` instead.
+ * @deprecated Renamed to `Blocks`.
  */
 export declare const RenderBlocks: typeof Blocks;
 /**
- * @deprecated Use `Content` instead.
+ * @deprecated Renamed to `Content`.
  */
 export declare const RenderContent: typeof Content;

package/dist/blocks/BaseText.js

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

package/dist/blocks/button/button.js

@@ -1,12 +0,0 @@
-"use client";
-import * as React from "react";
-function Button(props) {
-    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(React.Fragment, null,
-            React.createElement("button", { ...{}, ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-3e7bc8b2" }, props.text))),
-        React.createElement("style", null, `.button-3e7bc8b2 {
-  all: unset;
-}`)));
-}
-export default Button;

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

@@ -1,34 +0,0 @@
-export const componentInfo = {
-    name: 'Core:Button',
-    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
-    defaultStyles: {
-        // TODO: make min width more intuitive and set one
-        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
-};

package/dist/blocks/columns/columns.js

@@ -1,121 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import Blocks from "../../components/blocks/blocks";
-import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
-import InlinedStyles from "../../components/inlined-styles";
-import { TARGET } from "../../constants/target.js";
-function Columns(props) {
-    const [gutterSize, setGutterSize] = useState(() => typeof props.space === "number" ? props.space || 0 : 20);
-    const [cols, setCols] = useState(() => props.columns || []);
-    const [stackAt, setStackAt] = useState(() => props.stackColumnsAt || "tablet");
-    function getWidth(index) {
-        return cols[index]?.width || 100 / cols.length;
-    }
-    function getColumnCssWidth(index) {
-        const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-        return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-    }
-    function getTabletStyle({ stackedStyle, desktopStyle, }) {
-        return stackAt === "tablet" ? stackedStyle : desktopStyle;
-    }
-    function getMobileStyle({ stackedStyle, desktopStyle, }) {
-        return stackAt === "never" ? desktopStyle : stackedStyle;
-    }
-    const [flexDir, setFlexDir] = useState(() => props.stackColumnsAt === "never"
-        ? "row"
-        : props.reverseColumnsWhenStacked
-            ? "column-reverse"
-            : "column");
-    function columnsCssVars() {
-        return {
-            "--flex-dir": flexDir,
-            "--flex-dir-tablet": getTabletStyle({
-                stackedStyle: flexDir,
-                desktopStyle: "row",
-            }),
-        };
-    }
-    function columnCssVars(index) {
-        const gutter = index === 0 ? 0 : gutterSize;
-        if (TARGET === "reactNative") {
-            return {
-                marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-            };
-        }
-        const width = getColumnCssWidth(index);
-        const gutterPixels = `${gutter}px`;
-        const mobileWidth = "100%";
-        const mobileMarginLeft = 0;
-        const marginLeftKey = "marginLeft";
-        return {
-            width,
-            [marginLeftKey]: gutterPixels,
-            "--column-width-mobile": getMobileStyle({
-                stackedStyle: mobileWidth,
-                desktopStyle: width,
-            }),
-            "--column-margin-left-mobile": getMobileStyle({
-                stackedStyle: mobileMarginLeft,
-                desktopStyle: gutterPixels,
-            }),
-            "--column-width-tablet": getTabletStyle({
-                stackedStyle: mobileWidth,
-                desktopStyle: width,
-            }),
-            "--column-margin-left-tablet": getTabletStyle({
-                stackedStyle: mobileMarginLeft,
-                desktopStyle: gutterPixels,
-            }),
-        };
-    }
-    function getWidthForBreakpointSize(size) {
-        const breakpointSizes = getSizesForBreakpoints(props.builderContext.content?.meta?.breakpoints || {});
-        return breakpointSizes[size].max;
-    }
-    function columnsStyles() {
-        return `
-        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir-tablet);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-tablet) !important;
-            margin-left: var(--column-margin-left-tablet) !important;
-          }
-        }
-
-        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-mobile) !important;
-            margin-left: var(--column-margin-left-mobile) !important;
-          }
-        },
-      `;
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-3ea707d8", style: columnsCssVars(), ...{} },
-            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(InlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-3ea707d8-2", style: columnCssVars(index), ...{}, key: index },
-                React.createElement(Blocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
-                        flexGrow: "1",
-                    }, context: props.builderContext, registeredComponents: props.builderComponents }))))),
-        React.createElement("style", null, `.div-3ea707d8 {
-  display: flex;
-  line-height: normal;
-}.div-3ea707d8-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}`)));
-}
-export default Columns;

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

@@ -1,219 +0,0 @@
-export const componentInfo = {
-    // TODO: ways to statically preprocess JSON for references, functions, etc
-    name: 'Columns',
-    isRSC: 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: (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
-        }]
-};

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

@@ -1,23 +0,0 @@
-export const componentInfo = {
-    name: 'Custom Code',
-    static: 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
-        }]
-};

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

@@ -1,51 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-function CustomCode(props) {
-    const elem = useRef(null);
-    const [scriptsInserted, setScriptsInserted] = useState(() => []);
-    const [scriptsRun, setScriptsRun] = useState(() => []);
-    function findAndRunScripts() {
-        // TODO: Move this function to standalone one in '@builder.io/utils'
-        if (elem.current &&
-            elem.current.getElementsByTagName &&
-            typeof window !== "undefined") {
-            const scripts = elem.current.getElementsByTagName("script");
-            for (let i = 0; i < scripts.length; i++) {
-                const script = scripts[i];
-                if (script.src) {
-                    if (scriptsInserted.includes(script.src)) {
-                        continue;
-                    }
-                    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 (scriptsRun.includes(script.innerText)) {
-                        continue;
-                    }
-                    try {
-                        scriptsRun.push(script.innerText);
-                        new Function(script.innerText)();
-                    }
-                    catch (error) {
-                        console.warn("`CustomCode`: Error running script:", error);
-                    }
-                }
-            }
-        }
-    }
-    useEffect(() => {
-        findAndRunScripts();
-    }, []);
-    return (React.createElement("div", { ref: elem, className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
-}
-export default CustomCode;

package/dist/blocks/embed/component-info.js

@@ -1,39 +0,0 @@
-export const componentInfo = {
-    name: 'Embed',
-    static: true,
-    inputs: [{
-            name: 'url',
-            type: 'url',
-            required: true,
-            defaultValue: '',
-            helperText: 'e.g. enter a youtube url, google map, etc',
-            onChange: (options) => {
-                const url = options.get('url');
-                if (url) {
-                    options.set('content', 'Loading...');
-                    // TODO: get this out of here!
-                    const apiKey = 'ae0e60e78201a3f2b0de4b';
-                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
-                        if (options.get('url') === url) {
-                            if (data.html) {
-                                options.set('content', data.html);
-                            }
-                            else {
-                                options.set('content', 'Invalid url, please try another');
-                            }
-                        }
-                    }).catch(_err => {
-                        options.set('content', 'There was an error embedding this URL, please try again or another URL');
-                    });
-                }
-                else {
-                    options.delete('content');
-                }
-            }
-        }, {
-            name: 'content',
-            type: 'html',
-            defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-            hideFromUI: true
-        }]
-};

package/dist/blocks/embed/embed.js

@@ -1,42 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-import { isJsScript } from "./helpers.js";
-function Embed(props) {
-    const elem = useRef(null);
-    const [scriptsInserted, setScriptsInserted] = useState(() => []);
-    const [scriptsRun, setScriptsRun] = useState(() => []);
-    const [ranInitFn, setRanInitFn] = useState(() => false);
-    function findAndRunScripts() {
-        if (!elem.current || !elem.current.getElementsByTagName)
-            return;
-        const scripts = elem.current.getElementsByTagName("script");
-        for (let i = 0; i < scripts.length; i++) {
-            const script = scripts[i];
-            if (script.src && !scriptsInserted.includes(script.src)) {
-                scriptsInserted.push(script.src);
-                const newScript = document.createElement("script");
-                newScript.async = true;
-                newScript.src = script.src;
-                document.head.appendChild(newScript);
-            }
-            else if (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
-                try {
-                    scriptsRun.push(script.innerText);
-                    new Function(script.innerText)();
-                }
-                catch (error) {
-                    console.warn("`Embed`: Error running script:", error);
-                }
-            }
-        }
-    }
-    useEffect(() => {
-        if (elem.current && !ranInitFn) {
-            setRanInitFn(true);
-            findAndRunScripts();
-        }
-    }, [elem.current, ranInitFn]);
-    return (React.createElement("div", { className: "builder-embed", ref: elem, dangerouslySetInnerHTML: { __html: props.content } }));
-}
-export default Embed;

package/dist/blocks/embed/helpers.js

@@ -1,2 +0,0 @@
-const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
-export const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);