@builder.io/sdk-react 0.2.3-3 → 0.2.3-4

package/dist/sdk/components/render-content/components/render-styles.helpers.js

@@ -0,0 +1,59 @@
+const getCssFromFont = (font) => {
+    // TODO: compute what font sizes are used and only load those.......
+    const family = font.family +
+        (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+    const name = family.split(',')[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = '';
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            }
+            // TODO: maybe limit number loaded
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+export const getFontCss = ({ customFonts }) => {
+    // TODO: flag for this
+    // if (!this.builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+};
+export const getCss = ({ cssCode, contentId, }) => {
+    if (!cssCode) {
+        return '';
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    // Allow using `&` in custom CSS code like @emotion
+    // E.g. `& .foobar { ... }` to scope CSS
+    // TODO: handle if '&' is within a string like `content: "&"`
+    return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};

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

@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react";
+import { useState } from "react";
+import RenderInlinedStyles from "../../render-inlined-styles";
+import { getCss } from "./render-styles.helpers";
+import { getFontCss } from "./render-styles.helpers";
+function RenderContentStyles(props) {
+    const [injectedStyles, setInjectedStyles] = useState(() => `
+${getCss({
+        cssCode: props.cssCode,
+        contentId: props.contentId,
+    })}
+${getFontCss({
+        customFonts: props.customFonts,
+    })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`);
+    return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
+}
+export default RenderContentStyles;

package/dist/sdk/components/render-content/index.d.ts

@@ -0,0 +1 @@
+export { default } from './render-content';

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

@@ -0,0 +1 @@
+export { default } from './render-content';

package/dist/sdk/components/render-content/render-content.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { RenderContentProps } from "./render-content.types.js";
+declare function RenderContent(props: RenderContentProps): JSX.Element;
+export default RenderContent;

package/dist/sdk/components/render-content/render-content.helpers.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { RenderContentProps } from './render-content.types';
+export declare const getContextStateInitialValue: ({ content, data, locale, }: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data, }: Pick<RenderContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/dist/sdk/components/render-content/render-content.helpers.js

@@ -0,0 +1,30 @@
+export const getContextStateInitialValue = ({ content, data, locale, }) => {
+    const defaultValues = {};
+    // set default values for content state inputs
+    content?.data?.inputs?.forEach((input) => {
+        if (input.name &&
+            input.defaultValue !== undefined &&
+            content?.data?.state &&
+            content.data.state[input.name] === undefined) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = {
+        ...content?.data?.state,
+        ...data,
+        ...(locale ? { locale } : {}),
+    };
+    return { ...defaultValues, ...stateToUse };
+};
+export const getContentInitialValue = ({ content, data, }) => {
+    return !content
+        ? undefined
+        : {
+            ...content,
+            data: {
+                ...content?.data,
+                ...data,
+            },
+            meta: content?.meta,
+        };
+};

package/dist/sdk/components/render-content/render-content.js

@@ -0,0 +1,282 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { evaluate } from "../../functions/evaluate.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { fetch } from "../../functions/get-fetch.js";
+import { isBrowser } from "../../functions/is-browser.js";
+import { isEditing } from "../../functions/is-editing.js";
+import { isPreviewing } from "../../functions/is-previewing.js";
+import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
+import { _track } from "../../functions/track/index.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
+import builderContext from "../../context/builder.context.js";
+import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
+function RenderContent(props) {
+    const elementRef = useRef(null);
+    const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+    const [overrideContent, setOverrideContent] = useState(() => null);
+    const [useContent, setUseContent] = useState(() => getContentInitialValue({
+        content: props.content,
+        data: props.data,
+    }));
+    function mergeNewContent(newContent) {
+        setUseContent({
+            ...useContent,
+            ...newContent,
+            data: { ...useContent?.data, ...newContent?.data },
+            meta: {
+                ...useContent?.meta,
+                ...newContent?.meta,
+                breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+            },
+        });
+    }
+    function setBreakpoints(breakpoints) {
+        setUseContent({
+            ...useContent,
+            meta: { ...useContent?.meta, breakpoints },
+        });
+    }
+    const [update, setUpdate] = useState(() => 0);
+    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
+    const [contentState, setContentState] = useState(() => getContextStateInitialValue({
+        content: props.content,
+        data: props.data,
+        locale: props.locale,
+    }));
+    function setContextState(newState) {
+        setContentState(newState);
+    }
+    const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
+        ...getDefaultRegisteredComponents(),
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(props.customComponents || []),
+    ].reduce((acc, curr) => ({ ...acc, [curr.name]: curr }), {}));
+    function processMessage(event) {
+        const { data } = event;
+        if (data) {
+            switch (data.type) {
+                case "builder.configureSdk": {
+                    const messageContent = data.data;
+                    const { breakpoints, contentId } = messageContent;
+                    if (!contentId || contentId !== useContent?.id) {
+                        return;
+                    }
+                    if (breakpoints) {
+                        setBreakpoints(breakpoints);
+                    }
+                    setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+                    break;
+                }
+                case "builder.contentUpdate": {
+                    const messageContent = data.data;
+                    const key = messageContent.key ||
+                        messageContent.alias ||
+                        messageContent.entry ||
+                        messageContent.modelName;
+                    const contentData = messageContent.data;
+                    if (key === props.model) {
+                        mergeNewContent(contentData);
+                        setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+                    }
+                    break;
+                }
+                case "builder.patchUpdates": {
+                    // TODO
+                    break;
+                }
+            }
+        }
+    }
+    function evaluateJsCode() {
+        // run any dynamic JS code attached to content
+        const jsCode = useContent?.data?.jsCode;
+        if (jsCode) {
+            evaluate({
+                code: jsCode,
+                context: props.context || {},
+                state: contentState,
+            });
+        }
+    }
+    const [httpReqsData, setHttpReqsData] = useState(() => ({}));
+    const [clicked, setClicked] = useState(() => false);
+    function onClick(event) {
+        if (useContent) {
+            const variationId = useContent?.testVariationId;
+            const contentId = useContent?.id;
+            _track({
+                type: "click",
+                canTrack: canTrackToUse,
+                contentId,
+                apiKey: props.apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
+                ...getInteractionPropertiesForEvent(event),
+                unique: !clicked,
+            });
+        }
+        if (!clicked) {
+            setClicked(true);
+        }
+    }
+    function evalExpression(expression) {
+        return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+            code: group,
+            context: props.context || {},
+            state: contentState,
+        }));
+    }
+    function handleRequest({ url, key }) {
+        fetch(url)
+            .then((response) => response.json())
+            .then((json) => {
+            const newState = { ...contentState, [key]: json };
+            setContextState(newState);
+        })
+            .catch((err) => {
+            console.error("error fetching dynamic data", url, err);
+        });
+    }
+    function runHttpRequests() {
+        const requests = useContent?.data?.httpRequests ?? {};
+        Object.entries(requests).forEach(([key, url]) => {
+            if (url && (!httpReqsData[key] || isEditing())) {
+                const evaluatedUrl = evalExpression(url);
+                handleRequest({
+                    url: evaluatedUrl,
+                    key,
+                });
+            }
+        });
+    }
+    function emitStateUpdate() {
+        if (isEditing()) {
+            window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+                detail: {
+                    state: contentState,
+                    ref: {
+                        name: props.model,
+                    },
+                },
+            }));
+        }
+    }
+    useEffect(() => {
+        if (!props.apiKey) {
+            logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        }
+        if (isBrowser()) {
+            if (isEditing()) {
+                setForceReRenderCount(forceReRenderCount + 1);
+                registerInsertMenu();
+                setupBrowserForEditing({
+                    ...(props.locale
+                        ? {
+                            locale: props.locale,
+                        }
+                        : {}),
+                    ...(props.includeRefs
+                        ? {
+                            includeRefs: props.includeRefs,
+                        }
+                        : {}),
+                });
+                Object.values(allRegisteredComponents).forEach((registeredComponent) => {
+                    const message = createRegisterComponentMessage(registeredComponent);
+                    window.parent?.postMessage(message, "*");
+                });
+                window.addEventListener("message", processMessage);
+                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+            if (useContent) {
+                const variationId = useContent?.testVariationId;
+                const contentId = useContent?.id;
+                _track({
+                    type: "impression",
+                    canTrack: canTrackToUse,
+                    contentId,
+                    apiKey: props.apiKey,
+                    variationId: variationId !== contentId ? variationId : undefined,
+                });
+            } // override normal content in preview mode
+            if (isPreviewing()) {
+                const searchParams = new URL(location.href).searchParams;
+                const searchParamPreviewModel = searchParams.get("builder.preview");
+                const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
+                const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+                /**
+                 * Make sure that:
+                 * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered  *  at the same time, e.g. header/page/footer.  * - the API key is the same, since we don't want to preview content from other organizations.
+                 * - if there is content, that the preview ID is the same as that of the one we receive.
+                 *
+                 * TO-DO: should we only update the state when there is a change?
+                 **/
+                if (searchParamPreviewModel === props.model &&
+                    previewApiKey === props.apiKey &&
+                    (!props.content || searchParamPreviewId === props.content.id)) {
+                    getContent({
+                        model: props.model,
+                        apiKey: props.apiKey,
+                        apiVersion: props.apiVersion,
+                    }).then((content) => {
+                        if (content) {
+                            mergeNewContent(content);
+                        }
+                    });
+                }
+            }
+            evaluateJsCode();
+            runHttpRequests();
+            emitStateUpdate();
+        }
+    }, []);
+    useEffect(() => {
+        if (props.content) {
+            mergeNewContent(props.content);
+        }
+    }, [props.content]);
+    useEffect(() => {
+        evaluateJsCode();
+    }, [useContent?.data?.jsCode, contentState]);
+    useEffect(() => {
+        runHttpRequests();
+    }, [useContent?.data?.httpRequests]);
+    useEffect(() => {
+        emitStateUpdate();
+    }, [contentState]);
+    useEffect(() => {
+        return () => {
+            if (isBrowser()) {
+                window.removeEventListener("message", processMessage);
+                window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+        };
+    }, []);
+    return (React.createElement(builderContext.Provider, { value: {
+            content: useContent,
+            state: contentState,
+            setState: setContextState,
+            context: props.context || {},
+            apiKey: props.apiKey,
+            apiVersion: props.apiVersion,
+            registeredComponents: allRegisteredComponents,
+            inheritedStyles: {},
+        } }, useContent ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
+            TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts }))) : null,
+            React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
+}
+export default RenderContent;

package/dist/sdk/components/render-content/render-content.types.d.ts

@@ -0,0 +1,29 @@
+import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { ApiVersion } from '../../types/api-version';
+export type RenderContentProps = {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    apiVersion?: ApiVersion;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    includeRefs?: boolean;
+};
+export interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+        name?: string;
+        props?: {
+            builderBlock?: {
+                id?: string;
+            };
+        };
+    };
+}

package/dist/sdk/components/render-inlined-styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface Props {
+    styles: string;
+}
+declare function RenderInlinedStyles(props: Props): JSX.Element;
+export default RenderInlinedStyles;

package/dist/sdk/components/render-inlined-styles.js

@@ -0,0 +1,17 @@
+"use client";
+import * as React from "react";
+import { TARGET } from "../constants/target.js";
+function RenderInlinedStyles(props) {
+    function tag() {
+        // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+        // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+        return "style";
+    }
+    function injectedStyleScript() {
+        return `<${tag()}>${props.styles}</${tag()}>`;
+    }
+    const TagRef = tag();
+    return (React.createElement(React.Fragment, null, TARGET === "svelte" || TARGET === "qwik" ? (React.createElement(React.Fragment, null,
+        React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
+}
+export default RenderInlinedStyles;

package/dist/sdk/constants/builder-registered-components.d.ts

@@ -0,0 +1,6 @@
+import type { RegisteredComponent } from '../context/types.js';
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export declare const getDefaultRegisteredComponents: () => RegisteredComponent[];

package/dist/sdk/constants/builder-registered-components.js

@@ -0,0 +1,39 @@
+import { default as Button } from '../blocks/button/button';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
+import { default as Columns } from '../blocks/columns/columns';
+import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
+import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
+import { default as Fragment } from '../blocks/fragment/fragment';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
+import { default as Image } from '../blocks/image/image';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
+import { default as Section } from '../blocks/section/section';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
+import { default as Symbol } from '../blocks/symbol/symbol';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
+import { default as Text } from '../blocks/text/text';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed';
+import { default as Img } from '../blocks/img/img';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code';
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export const getDefaultRegisteredComponents = () => [
+    { component: Button, ...buttonComponentInfo },
+    { component: Columns, ...columnsComponentInfo },
+    { component: customCode, ...customCodeInfo },
+    { component: embed, ...embedComponentInfo },
+    { component: Fragment, ...fragmentComponentInfo },
+    { component: Image, ...imageComponentInfo },
+    { component: Img, ...imgComponentInfo },
+    { component: Section, ...sectionComponentInfo },
+    { component: Symbol, ...symbolComponentInfo },
+    { component: Text, ...textComponentInfo },
+    { component: Video, ...videoComponentInfo },
+];

package/dist/sdk/constants/device-sizes.d.ts

@@ -0,0 +1,13 @@
+export type SizeName = 'large' | 'medium' | 'small';
+interface Size {
+    min: number;
+    default: number;
+    max: number;
+}
+export declare const getMaxWidthQueryForSize: (size: SizeName, sizeValues?: Record<SizeName, Size>) => string;
+interface Breakpoints {
+    small?: number;
+    medium?: number;
+}
+export declare const getSizesForBreakpoints: ({ small, medium }: Breakpoints) => Record<SizeName, Size>;
+export {};

package/dist/sdk/constants/device-sizes.js

@@ -0,0 +1,44 @@
+import { fastClone } from '../functions/fast-clone';
+const SIZES = {
+    small: {
+        min: 320,
+        default: 321,
+        max: 640,
+    },
+    medium: {
+        min: 641,
+        default: 642,
+        max: 991,
+    },
+    large: {
+        min: 990,
+        default: 991,
+        max: 1200,
+    },
+};
+export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+export const getSizesForBreakpoints = ({ small, medium }) => {
+    const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+    if (!small || !medium) {
+        return newSizes;
+    }
+    const smallMin = Math.floor(small / 2);
+    newSizes.small = {
+        max: small,
+        min: smallMin,
+        default: smallMin + 1,
+    };
+    const mediumMin = newSizes.small.max + 1;
+    newSizes.medium = {
+        max: medium,
+        min: mediumMin,
+        default: mediumMin + 1,
+    };
+    const largeMin = newSizes.medium.max + 1;
+    newSizes.large = {
+        max: 2000,
+        min: largeMin,
+        default: largeMin + 1,
+    };
+    return newSizes;
+};

package/dist/sdk/constants/target.d.ts

@@ -0,0 +1,2 @@
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
+export declare const TARGET: any;

package/dist/sdk/constants/target.js

@@ -0,0 +1,2 @@
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
+export const TARGET = 'react';

package/dist/sdk/context/builder.context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").Context<any>;
+export default _default;

package/dist/sdk/context/builder.context.js

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+export default createContext({
+    content: null,
+    context: {},
+    state: {},
+    setState() { },
+    apiKey: null,
+    apiVersion: undefined,
+    registeredComponents: {},
+    inheritedStyles: {},
+});

package/dist/sdk/context/types.d.ts

@@ -0,0 +1,20 @@
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
+export type RegisteredComponent = ComponentInfo & {
+    component: any;
+};
+export type RegisteredComponents = Dictionary<RegisteredComponent>;
+export type BuilderRenderState = Record<string, unknown>;
+export type BuilderRenderContext = Record<string, unknown>;
+export interface BuilderContextInterface {
+    content: Nullable<BuilderContent>;
+    context: BuilderRenderContext;
+    state: BuilderRenderState;
+    setState?: (state: BuilderRenderState) => void;
+    apiKey: string | null;
+    apiVersion: ApiVersion | undefined;
+    registeredComponents: RegisteredComponents;
+    inheritedStyles: Record<string, unknown>;
+}

package/dist/sdk/functions/camel-to-kebab-case.d.ts

@@ -0,0 +1 @@
+export declare const camelToKebabCase: (string: string) => string;

package/dist/sdk/functions/camel-to-kebab-case.js

@@ -0,0 +1 @@
+export const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

package/dist/sdk/functions/evaluate.d.ts

@@ -0,0 +1,6 @@
+import type { BuilderContextInterface } from '../context/types.js';
+export declare function evaluate({ code, context, state, event, isExpression, }: {
+    code: string;
+    event?: Event;
+    isExpression?: boolean;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): any;