@builder.io/react 8.0.6-1 → 8.0.6-3

package/dist/types/src/components/builder-component.component.d.ts

@@ -0,0 +1,324 @@
+/// <reference types="node" />
+import React, { PropsWithChildren } from 'react';
+import { BuilderContent } from './builder-content.component';
+import { Builder, GetContentOptions, Subscription, BehaviorSubject, BuilderElement, BuilderContent as Content, Component } from '@builder.io/sdk';
+import onChange from '../../lib/on-change';
+export { onChange };
+import { Breakpoints } from '../constants/device-sizes.constant';
+import { Url } from 'url';
+export type RegisteredComponent = Component & {
+    component?: React.ComponentType<any>;
+};
+export interface BuilderComponentProps {
+    /**
+     * @package
+     * @deprecated use {@link model} instead.
+     * @hidden
+     */
+    modelName?: string;
+    /**
+     * Name of the model this is rendering content for. Default is "page".
+     */
+    model?: string;
+    /**
+     * @package
+     * @deprecated use {@link model} instead.
+     * @hidden
+     */
+    name?: string;
+    /**
+     * Data is passed along as `state.*` to the component.
+     * @see {@link https://github.com/BuilderIO/builder/tree/master/packages/react#passing-data-and-functions-down}
+     *
+     * @example
+     * ```
+     * <BuilderComponent
+     *  model="page"
+     *  data={{
+     *    products: productsList,
+     *    myFunction: () => alert('Triggered!'),
+     *    foo: 'bar'
+     *  }} >
+     * ```
+     */
+    data?: any;
+    /**
+     * Specific instance of Builder that should be used. You might use this for
+     * server side rendering. It's generally not recommended except for very
+     * advanced multi-tenant use cases.
+     */
+    builder?: Builder;
+    /**
+     * Content entry ID for this component to fetch client side
+     */
+    entry?: string;
+    /**
+     * @package
+     *
+     * Builder public API key.
+     *
+     * @see {@link builder.init()} for the preferred way of supplying your API key.
+     */
+    apiKey?: string;
+    /**
+     * @private
+     * @hidden
+     */
+    codegen?: boolean;
+    options?: GetContentOptions;
+    /**
+     * Function callback invoked with `data` and your content when it becomes
+     * available.
+     *
+     * @see {@link https://github.com/BuilderIO/builder/tree/master/packages/react#passing-data-and-functions-down}
+     */
+    contentLoaded?: (data: any, content: Content) => void;
+    /**
+     * Instead of having Builder render a link for you with plain anchor
+     * elements, use your own function. Useful when using Next.js, Gatsby, or
+     * other client side routers' custom `<Link>` components.
+     *
+     * ## Notes
+     *
+     * This must be a function that returns JSX, not a component!
+     *
+     * ## Examples
+     *
+     * @see {@link https://github.com/BuilderIO/builder/blob/0f0bc1ca835335f99fc21efb20ff3c4836bc9f41/examples/next-js-builder-site/src/functions/render-link.tsx#L6}
+     */
+    renderLink?: (props: React.AnchorHTMLAttributes<any>) => React.ReactNode;
+    /**
+     * Callback to run if an error occurred while fetching content.
+     */
+    contentError?: (error: any) => void;
+    /**
+     * Manually specify what Builder content JSON object to render. @see {@link
+     * https://github.com/BuilderIO/builder/tree/master/packages/react#passing-content-manually}
+     */
+    content?: Content;
+    /**
+     * @package
+     * @hidden
+     *
+     * Location object that provides the current url, path, etc; for server side
+     * rendering.
+     */
+    location?: Location | Url;
+    /**
+     * Callback to run when Builder state changes (e.g. state.foo = 'bar' in an
+     * action)
+     */
+    onStateChange?: (newData: any) => void;
+    /**
+     * @package
+     * @deprecated
+     * @hidden
+     */
+    noAsync?: boolean;
+    /**
+     * @package
+     * @hidden
+     *
+     * Flag to render email content (small differences in our render logic for
+     * email support).
+     */
+    emailMode?: boolean;
+    /**
+     * @package
+     * @hidden
+     *
+     * Flag to render amp content (small differences in our render logic for amp
+     * support)
+     */
+    ampMode?: boolean;
+    /**
+     * @package
+     * @hidden
+     *
+     * Render content in-line only (can't passed from the content prop) don't
+     * fetch content from our API.
+     */
+    inlineContent?: boolean;
+    /**
+     * @package
+     * @deprecated
+     * @hidden
+     */
+    builderBlock?: BuilderElement;
+    /**
+     * @package
+     * @deprecated
+     * @hidden
+     */
+    dataOnly?: boolean;
+    /**
+     * @package
+     * @deprecated
+     * @hidden
+     */
+    hydrate?: boolean;
+    /**
+     * @package
+     * @deprecated use {@link Builder.isStatic} instead
+     * @hidden
+     */
+    isStatic?: boolean;
+    /**
+     * Object that will be available in actions and bindings.
+     *
+     * @see {@link https://github.com/BuilderIO/builder/tree/master/packages/react#passing-data-and-functions-down}
+     */
+    context?: any;
+    /**
+     * @deprecated
+     * @hidden
+     */
+    url?: string;
+    /**
+     * @hidden
+     * Set to true if this is not the root content component, for instance for symbols
+     */
+    isChild?: boolean;
+    /**
+     * Set to true to not call `event.stopPropagation()` in the editor to avoid
+     * issues with client site routing triggering when editing in Builder, causing
+     * navigation to other pages unintended
+     */
+    stopClickPropagationWhenEditing?: boolean;
+    /**
+     * Set to the current locale in your application if you want localized inputs to be auto-resolved, should match one of the locales keys in your space settings
+     * Learn more about adding or removing locales [here](https://www.builder.io/c/docs/add-remove-locales)
+     */
+    locale?: string;
+    /**
+     * Pass a list of custom components to register with Builder.io.
+     */
+    customComponents?: Array<RegisteredComponent>;
+}
+export interface BuilderComponentState {
+    state: any;
+    update: (state: any) => any;
+    updates: number;
+    context: any;
+    key: number;
+    breakpoints?: Breakpoints;
+}
+/**
+ * Responsible for rendering Builder content of type: 'page' or 'section' to
+ * react components. It will attempt to fetch content from the API based on
+ * defined user attributes (URL path, device type, and any custom targeting you set using `builder.setUserAttributes`) unless a `BuilderContent`
+ * object is provided to `props.content`
+ *
+ * Use it to mount content in desired location, enable editing in place when
+ * previewed in the editor.
+ *
+ * Supports server-side-rendering when passed the content json as
+ * `props.content`.
+ */
+export declare class BuilderComponent extends React.Component<PropsWithChildren<BuilderComponentProps>, BuilderComponentState> {
+    static defaults: Pick<BuilderComponentProps, 'codegen'>;
+    subscriptions: Subscription;
+    onStateChange: BehaviorSubject<any, any>;
+    asServer: boolean;
+    contentRef: BuilderContent | null;
+    styleRef: HTMLStyleElement | null;
+    rootState: any;
+    lastJsCode: string;
+    lastHttpRequests: {
+        [key: string]: string | undefined;
+    };
+    httpSubscriptionPerKey: {
+        [key: string]: Subscription | undefined;
+    };
+    firstLoad: boolean;
+    ref: HTMLElement | null;
+    Component: any;
+    get options(): {
+        modelName?: string | undefined;
+        model?: string | undefined;
+        name?: string | undefined;
+        data?: any;
+        builder?: Builder | undefined;
+        entry?: string | undefined;
+        apiKey?: string | undefined;
+        codegen?: boolean | undefined;
+        options?: GetContentOptions | undefined;
+        contentLoaded?: ((data: any, content: Content) => void) | undefined;
+        renderLink?: ((props: React.AnchorHTMLAttributes<any>) => React.ReactNode) | undefined;
+        contentError?: ((error: any) => void) | undefined;
+        content?: Content | undefined;
+        location?: Location | Url | undefined;
+        onStateChange?: ((newData: any) => void) | undefined;
+        noAsync?: boolean | undefined;
+        emailMode?: boolean | undefined;
+        ampMode?: boolean | undefined;
+        inlineContent?: boolean | undefined;
+        builderBlock?: BuilderElement | undefined;
+        dataOnly?: boolean | undefined;
+        hydrate?: boolean | undefined;
+        isStatic?: boolean | undefined;
+        context?: any;
+        url?: string | undefined;
+        isChild?: boolean | undefined;
+        stopClickPropagationWhenEditing?: boolean | undefined;
+        locale?: string | undefined;
+        customComponents?: RegisteredComponent[] | undefined;
+        children?: React.ReactNode;
+    };
+    get name(): string | undefined;
+    private _asyncRequests?;
+    private _errors?;
+    private _logs?;
+    private sizes;
+    get element(): HTMLElement | null;
+    get inlinedContent(): Content | undefined;
+    constructor(props: BuilderComponentProps);
+    get builder(): Builder;
+    getHtmlData(): any;
+    get device(): "mobile" | "tablet" | "desktop";
+    get locationState(): {
+        path: any;
+        query: {
+            [key: string]: string;
+        };
+        search: any;
+        host: any;
+        hostname: any;
+        pathname: any;
+    };
+    get deviceSizeState(): string;
+    messageListener: (event: MessageEvent) => void;
+    resizeFn: () => void;
+    resizeListener: (this: any) => any;
+    static renderInto(elementOrSelector: string | HTMLElement, props?: BuilderComponentProps, hydrate?: boolean, fresh?: boolean): void;
+    mounted: boolean;
+    registerCustomComponents(): void;
+    componentDidMount(): void;
+    updateState: (fn?: ((state: any) => void) | undefined) => void;
+    get isPreviewing(): boolean;
+    notifyStateChange(): void;
+    processStateFromApi(state: {
+        [key: string]: any;
+    }): {
+        [key: string]: any;
+    };
+    get location(): any;
+    getCssFromFont(font: any, data?: any): string;
+    componentWillUnmount(): void;
+    getFontCss(data?: any): any;
+    ensureFontsLoaded(data?: any): void;
+    getCss(data?: any): any;
+    get data(): any;
+    componentDidUpdate(prevProps: BuilderComponentProps): void;
+    checkStyles(data: any): void;
+    reload(): void;
+    get content(): Content | undefined;
+    get externalState(): any;
+    get useContent(): any;
+    render(): React.JSX.Element;
+    evalExpression(expression: string): string;
+    handleRequest(propertyName: string, url: string): Promise<any>;
+    unsubscribe(): void;
+    handleBuilderRequest(propertyName: string, optionsString: string): void;
+    onContentLoaded: (data: any, content: Content) => void;
+}

package/dist/types/src/components/builder-content.component.d.ts

@@ -0,0 +1,271 @@
+import React from 'react';
+import { Subscription, GetContentOptions, Builder, BuilderContent as Content } from '@builder.io/sdk';
+export type BuilderContentProps<ContentType> = {
+    /**
+     * Callback to run when content is fetched and loaded.
+     */
+    contentLoaded?: (data: any, content: any) => void;
+    /**
+     * Callback to run if an error occurred while fetching content.
+     */
+    contentError?: (error: any) => void;
+    options?: GetContentOptions;
+    children: (content: ContentType, loading?: boolean, fullData?: any) => React.ReactNode;
+    /**
+     * Only render what was explicitly passed in via `content` - don't fetch from
+     * the Builder API.
+     *
+     * @see content
+     */
+    inline?: boolean;
+    /**
+     * @package
+     * @deprecated
+     */
+    dataOnly?: boolean;
+    /**
+     * @package
+     * Pass in a specific builder instance to use instead of the default
+     * singleton.
+     */
+    builder?: Builder;
+    /**
+     * @deprecated and unnecessary
+     */
+    isStatic?: boolean;
+    /**
+     * Builder content object to use instead of fetching from the API.
+     *
+     * Required if `inline` is set to `true`.
+     */
+    content?: Content;
+} & ({
+    model: string;
+} | {
+    modelName: string;
+});
+/**
+ * When passed content json explicitly it'll calculate a/b tests on the content
+ * and pass the winning variation down to the children function. If then content
+ * prop was omitted it'll try to fetch matching content from your Builder
+ * account based on the default user attributes and model.
+ */
+export declare class BuilderContent<ContentType extends object = any> extends React.Component<BuilderContentProps<ContentType>> {
+    ref: HTMLDivElement | null;
+    get builder(): Builder;
+    get name(): string;
+    get renderedVariantId(): any;
+    get options(): {
+        apiVersion?: "v1" | undefined;
+        fetchOptions?: object | undefined;
+        userAttributes?: import("@builder.io/sdk/dist/src/builder.class").UserAttributes | undefined;
+        url?: string | undefined;
+        includeUrl?: boolean | undefined;
+        includeRefs?: boolean | undefined;
+        cacheSeconds?: number | undefined;
+        staleCacheSeconds?: number | undefined;
+        limit?: number | undefined;
+        offset?: number | undefined;
+        query?: any;
+        cachebust?: boolean | undefined;
+        prerender?: boolean | undefined;
+        extractCss?: boolean | undefined;
+        initialContent?: any;
+        model?: string | undefined;
+        cache?: boolean | undefined;
+        locale?: string | undefined;
+        preview?: boolean | undefined;
+        entry?: string | undefined;
+        alias?: string | undefined;
+        fields?: string | undefined;
+        omit?: string | undefined;
+        key?: string | undefined;
+        format?: "email" | "html" | "react" | "solid" | "amp" | undefined;
+        noWrap?: true | undefined;
+        rev?: string | undefined;
+        static?: boolean | undefined;
+        options?: {
+            [key: string]: any;
+        } | undefined;
+        noEditorUpdates?: boolean | undefined;
+        noTraverse?: boolean | undefined;
+        sort?: {
+            [key: string]: 1 | -1;
+        } | undefined;
+        includeUnpublished?: boolean | undefined;
+    } | {
+        apiVersion?: "v3" | undefined;
+        enrich?: boolean | undefined;
+        fetchOptions?: object | undefined;
+        userAttributes?: import("@builder.io/sdk/dist/src/builder.class").UserAttributes | undefined;
+        url?: string | undefined;
+        includeUrl?: boolean | undefined;
+        includeRefs?: boolean | undefined;
+        cacheSeconds?: number | undefined;
+        staleCacheSeconds?: number | undefined;
+        limit?: number | undefined;
+        offset?: number | undefined;
+        query?: any;
+        cachebust?: boolean | undefined;
+        prerender?: boolean | undefined;
+        extractCss?: boolean | undefined;
+        initialContent?: any;
+        model?: string | undefined;
+        cache?: boolean | undefined;
+        locale?: string | undefined;
+        preview?: boolean | undefined;
+        entry?: string | undefined;
+        alias?: string | undefined;
+        fields?: string | undefined;
+        omit?: string | undefined;
+        key?: string | undefined;
+        format?: "email" | "html" | "react" | "solid" | "amp" | undefined;
+        noWrap?: true | undefined;
+        rev?: string | undefined;
+        static?: boolean | undefined;
+        options?: {
+            [key: string]: any;
+        } | undefined;
+        noEditorUpdates?: boolean | undefined;
+        noTraverse?: boolean | undefined;
+        sort?: {
+            [key: string]: 1 | -1;
+        } | undefined;
+        includeUnpublished?: boolean | undefined;
+    } | {
+        apiVersion?: undefined;
+        enrich?: boolean | undefined;
+        fetchOptions?: object | undefined;
+        userAttributes?: import("@builder.io/sdk/dist/src/builder.class").UserAttributes | undefined;
+        url?: string | undefined;
+        includeUrl?: boolean | undefined;
+        includeRefs?: boolean | undefined;
+        cacheSeconds?: number | undefined;
+        staleCacheSeconds?: number | undefined;
+        limit?: number | undefined;
+        offset?: number | undefined;
+        query?: any;
+        cachebust?: boolean | undefined;
+        prerender?: boolean | undefined;
+        extractCss?: boolean | undefined;
+        initialContent?: any;
+        model?: string | undefined;
+        cache?: boolean | undefined;
+        locale?: string | undefined;
+        preview?: boolean | undefined;
+        entry?: string | undefined;
+        alias?: string | undefined;
+        fields?: string | undefined;
+        omit?: string | undefined;
+        key?: string | undefined;
+        format?: "email" | "html" | "react" | "solid" | "amp" | undefined;
+        noWrap?: true | undefined;
+        rev?: string | undefined;
+        static?: boolean | undefined;
+        options?: {
+            [key: string]: any;
+        } | undefined;
+        noEditorUpdates?: boolean | undefined;
+        noTraverse?: boolean | undefined;
+        sort?: {
+            [key: string]: 1 | -1;
+        } | undefined;
+        includeUnpublished?: boolean | undefined;
+    };
+    get data(): {
+        variationId: any;
+        testVariationId: any;
+        testVariationName: string;
+        '@version'?: number | undefined;
+        id?: string | undefined;
+        name?: string | undefined;
+        published?: "published" | "draft" | "archived" | undefined;
+        modelId?: string | undefined;
+        priority?: number | undefined;
+        firstPublished?: number | undefined;
+        lastUpdated?: number | undefined;
+        startDate?: number | undefined;
+        endDate?: number | undefined;
+        variations?: {
+            [id: string]: import("@builder.io/sdk").BuilderContentVariation | undefined;
+        } | undefined;
+        data?: {
+            [key: string]: any;
+            blocks?: import("@builder.io/sdk").BuilderElement[] | undefined;
+            inputs?: import("@builder.io/sdk").Input[] | undefined;
+            state?: {
+                [key: string]: any;
+            } | undefined;
+        } | undefined;
+        testRatio?: number | undefined;
+    } | null;
+    state: {
+        loading: boolean;
+        data: {
+            variationId: any;
+            testVariationId: any;
+            testVariationName: string;
+            '@version'?: number | undefined;
+            id?: string | undefined;
+            name?: string | undefined;
+            published?: "published" | "draft" | "archived" | undefined;
+            modelId?: string | undefined;
+            priority?: number | undefined;
+            firstPublished?: number | undefined;
+            lastUpdated?: number | undefined;
+            startDate?: number | undefined;
+            endDate?: number | undefined;
+            variations?: {
+                [id: string]: import("@builder.io/sdk").BuilderContentVariation | undefined;
+            } | undefined;
+            data?: {
+                [key: string]: any;
+                blocks?: import("@builder.io/sdk").BuilderElement[] | undefined;
+                inputs?: import("@builder.io/sdk").Input[] | undefined;
+                state?: {
+                    [key: string]: any;
+                } | undefined;
+            } | undefined;
+            testRatio?: number | undefined;
+        } | null;
+        updates: number;
+    };
+    onWindowMessage: (event: MessageEvent) => void;
+    subscriptions: Subscription<Function>;
+    firstLoad: boolean;
+    clicked: boolean;
+    trackedImpression: boolean;
+    intersectionObserver: IntersectionObserver | null;
+    componentDidMount(): void;
+    subscribeToContent(): void;
+    componentWillUnmount(): void;
+    onClick: (reactEvent: React.MouseEvent<HTMLElement>) => void;
+    render(): React.JSX.Element | null;
+}
+export declare const getContentWithInfo: (content?: Content) => {
+    variationId: any;
+    testVariationId: any;
+    testVariationName: string;
+    '@version'?: number | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    published?: "published" | "draft" | "archived" | undefined;
+    modelId?: string | undefined;
+    priority?: number | undefined;
+    firstPublished?: number | undefined;
+    lastUpdated?: number | undefined;
+    startDate?: number | undefined;
+    endDate?: number | undefined;
+    variations?: {
+        [id: string]: import("@builder.io/sdk").BuilderContentVariation | undefined;
+    } | undefined;
+    data?: {
+        [key: string]: any;
+        blocks?: import("@builder.io/sdk").BuilderElement[] | undefined;
+        inputs?: import("@builder.io/sdk").Input[] | undefined;
+        state?: {
+            [key: string]: any;
+        } | undefined;
+    } | undefined;
+    testRatio?: number | undefined;
+} | null;

package/dist/types/src/components/insert-spacer.component.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SpacerProps {
+    id: string;
+    position: 'before' | 'after';
+}
+interface SpacerState {
+    grow: boolean;
+}
+export declare class InsertSpacer extends React.Component<SpacerProps, SpacerState> {
+    componentDidMount(): void;
+    render(): JSX.Element | null;
+}
+export {};

package/dist/types/src/components/no-wrap.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NoWrap: (props: React.ComponentPropsWithoutRef<any>) => any;

package/dist/types/src/components/variants-provider.component.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { BuilderContent } from '@builder.io/sdk';
+interface VariantsProviderProps {
+    initialContent: BuilderContent;
+    children: (variants: BuilderContent[], renderScript?: () => JSX.Element) => JSX.Element;
+}
+export declare const VariantsProvider: ({ initialContent, children }: VariantsProviderProps) => React.JSX.Element;
+export {};

package/dist/types/src/constants/device-sizes.constant.d.ts

@@ -0,0 +1,57 @@
+export type Size = 'large' | 'medium' | 'small' | 'xsmall';
+export declare const sizeNames: Size[];
+declare const sizes: {
+    xsmall: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    small: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    medium: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    large: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    getWidthForSize(size: Size): number;
+    getSizeForWidth(width: number): Size;
+};
+export type Sizes = typeof sizes;
+export interface Breakpoints {
+    xsmall?: number;
+    small?: number;
+    medium?: number;
+}
+export declare const getSizesForBreakpoints: (breakpoints: Breakpoints) => {
+    xsmall: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    small: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    medium: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    large: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    getWidthForSize(size: Size): number;
+    getSizeForWidth(width: number): Size;
+};
+export {};

package/dist/types/src/constants/file-types.constant.d.ts

@@ -0,0 +1,2 @@
+export declare const IMAGE_FILE_TYPES: string[];
+export declare const VIDEO_FILE_TYPES: string[];

package/dist/types/src/decorators/builder-block.decorator.d.ts

@@ -0,0 +1,5 @@
+import { Component } from '@builder.io/sdk';
+interface ReactComponent extends Component {
+}
+export declare function BuilderBlock(options: ReactComponent): (component: import("@builder.io/sdk").Class) => import("@builder.io/sdk").Class;
+export {};

package/dist/types/src/functions/apply-patch-with-mutation.d.ts

@@ -0,0 +1,5 @@
+export declare const applyPatchWithMinimalMutationChain: <T extends object>(obj: T, patch: {
+    path: string;
+    op: 'add' | 'remove' | 'replace';
+    value: any;
+}, preserveRoot?: boolean) => T;

package/dist/types/src/functions/apply-patch-with-mutation.test.d.ts

@@ -0,0 +1 @@
+export {};