@builder.io/sdk-react 0.5.8 → 0.6.0

package/{dist → types}/components/content/content.types.d.ts

@@ -1,6 +1,6 @@
 import type { BuilderRenderState } from '../../context/types.js';
 import type { EnforcePartials } from '../../types/enforced-partials.js';
-import type { ContentVariantsProps } from '../content-variants/content-variants.types.js';
+import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
 interface InternalRenderProps {
     /**
      * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
@@ -9,7 +9,7 @@ interface InternalRenderProps {
     showContent: boolean;
     isSsrAbTest: boolean;
 }
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {

package/{dist → types}/components/content-variants/content-variants.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-type VariantsProviderProps = ContentVariantsProps & {
+type VariantsProviderProps = ContentVariantsPrps & {
     /**
      * For internal use only. Do not provide this prop.
      */
     __isNestedRender?: boolean;
 };
-import type { ContentVariantsProps } from "./content-variants.types.js";
+import type { ContentVariantsPrps } from "./content-variants.types.js";
 declare function ContentVariants(props: VariantsProviderProps): JSX.Element;
 export default ContentVariants;

package/{dist → types}/components/content-variants/content-variants.types.d.ts

@@ -2,7 +2,7 @@ import type { BuilderRenderContext, RegisteredComponent } from '../../context/ty
 import type { ApiVersion } from '../../types/api-version.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import type { Nullable } from '../../types/typescript.js';
-export interface ContentVariantsProps {
+export interface ContentVariantsPrps {
     content?: Nullable<BuilderContent>;
     model?: string;
     data?: {

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/browser-runtime/browser.d.ts

@@ -0,0 +1,4 @@
+import type { BuilderRenderState } from '../../../context/types.js';
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInBrowser: ({ code, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;
+export declare function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState;

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

@@ -0,0 +1 @@
+export { runInBrowser as evaluator } from './browser.js';

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/evaluate.d.ts

@@ -0,0 +1,6 @@
+import type { ExecutorArgs } from './helpers.js';
+export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
+    event?: Event;
+    isExpression?: boolean;
+};
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): any;

package/types/functions/evaluate/helpers.d.ts

@@ -0,0 +1,18 @@
+import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
+import type { getUserAttributes } from '../track/helpers.js';
+export type BuilderGlobals = {
+    isEditing: boolean | undefined;
+    isBrowser: boolean | undefined;
+    isServer: boolean | undefined;
+    getUserAttributes: typeof getUserAttributes;
+};
+export type ExecutorArgs = Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'> & {
+    code: string;
+    builder: BuilderGlobals;
+    event: Event | undefined;
+};
+export type Executor = (args: ExecutorArgs) => any;
+export type FunctionArguments = ReturnType<typeof getFunctionArguments>;
+export declare const getFunctionArguments: ({ builder, context, event, state }: Pick<ExecutorArgs, "context" | "builder" | "event"> & {
+    state: BuilderRenderState;
+}) => [string, Event | BuilderRenderState | import("../../context/types.js").BuilderRenderContext | BuilderGlobals][];

package/types/functions/evaluate/index.d.ts

@@ -0,0 +1 @@
+export { evaluate } from './evaluate.js';

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

@@ -0,0 +1 @@
+export { evaluator } from '../browser-runtime/index.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

@@ -1,4 +1,4 @@
-import type { ContentVariantsProps } from '../components/content-variants/content-variants.types.js';
+import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types.js';
 import type { Dictionary } from '../types/typescript.js';
 import type { GetContentOptions } from './get-content/types.js';
 type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
@@ -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<ContentVariantsProps>;
+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/types/index.d.ts

@@ -0,0 +1,7 @@
+export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/blocks-exports.js';
+/**
+ * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
+ * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
+ */
+export * from './server-index.js';

package/{dist/index.d.ts → types/server-index.d.ts}

@@ -1,5 +1,4 @@
 export * from './index-helpers/top-of-file.js';
-export * from './index-helpers/blocks-exports.js';
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';

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-7267e9c6" }, props.text))),
-        React.createElement("style", null, `.button-7267e9c6 {
-  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-9f5ab4f8", 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-9f5ab4f8-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-9f5ab4f8 {
-  display: flex;
-  line-height: normal;
-}.div-9f5ab4f8-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
-        }]
-};