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

package/dist/sdk/functions/evaluate.js

@@ -0,0 +1,28 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+export function evaluate({ code, context, state, event, isExpression = true, }) {
+    if (code === '') {
+        console.warn('Skipping evaluation of empty code block.');
+        return;
+    }
+    const builder = {
+        isEditing: isEditing(),
+        isBrowser: isBrowser(),
+        isServer: !isBrowser(),
+    };
+    // Be able to handle simple expressions like "state.foo" or "1 + 1"
+    // as well as full blocks like "var foo = "bar"; return foo"
+    const useReturn = 
+    // we disable this for cases where we definitely don't want a return
+    isExpression &&
+        !(code.includes(';') ||
+            code.includes(' return ') ||
+            code.trim().startsWith('return '));
+    const useCode = useReturn ? `return (${code});` : code;
+    try {
+        return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
+    }
+    catch (e) {
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
+    }
+}

package/dist/sdk/functions/event-handler-name.d.ts

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

package/dist/sdk/functions/event-handler-name.js

@@ -0,0 +1,4 @@
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+export const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;

package/dist/sdk/functions/extract-text-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export declare const extractTextStyles: (styles: Partial<CSSStyleDeclaration>) => Partial<CSSStyleDeclaration>;

package/dist/sdk/functions/extract-text-styles.js

@@ -0,0 +1,34 @@
+const TEXT_STYLE_KEYS = [
+    'color',
+    'whiteSpace',
+    'direction',
+    'hyphens',
+    'overflowWrap',
+];
+/**
+ * Check if the key represent a CSS style property that applies to text
+ * See MDN docs for refrence of what properties apply to text.
+ * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#summary
+ */
+const isTextStyle = (key) => {
+    return (TEXT_STYLE_KEYS.includes(key) ||
+        key.startsWith('font') ||
+        key.startsWith('text') ||
+        key.startsWith('letter') ||
+        key.startsWith('line') ||
+        key.startsWith('word') ||
+        key.startsWith('writing'));
+};
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export const extractTextStyles = (styles) => {
+    const textStyles = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Object.entries(styles).forEach(([key, value]) => {
+        if (isTextStyle(key)) {
+            textStyles[key] = value;
+        }
+    });
+    return textStyles;
+};

package/dist/sdk/functions/fast-clone.d.ts

@@ -0,0 +1,4 @@
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+export declare const fastClone: <T extends object>(obj: T) => T;

package/dist/sdk/functions/fast-clone.js

@@ -0,0 +1,4 @@
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+export const fastClone = (obj) => JSON.parse(JSON.stringify(obj));

package/dist/sdk/functions/get-block-actions-handler.d.ts

@@ -0,0 +1,8 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+type Options = {
+    block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'state' | 'context'>;
+type EventHandler = (event: Event) => any;
+export declare const createEventHandler: (value: string, options: Options) => EventHandler;
+export {};

package/dist/sdk/functions/get-block-actions-handler.js

@@ -0,0 +1,8 @@
+import { evaluate } from './evaluate.js';
+export const createEventHandler = (value, options) => (event) => evaluate({
+    code: value,
+    context: options.context,
+    state: options.state,
+    event,
+    isExpression: false,
+});

package/dist/sdk/functions/get-block-actions.d.ts

@@ -0,0 +1,9 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+type Actions = {
+    [index: string]: (event: Event) => any;
+};
+export declare function getBlockActions(options: {
+    block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): Actions;
+export {};

package/dist/sdk/functions/get-block-actions.js

@@ -0,0 +1,15 @@
+import { getEventHandlerName } from './event-handler-name.js';
+import { createEventHandler } from './get-block-actions-handler.js';
+export function getBlockActions(options) {
+    const obj = {};
+    const optionActions = options.block.actions ?? {};
+    for (const key in optionActions) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (!optionActions.hasOwnProperty(key)) {
+            continue;
+        }
+        const value = optionActions[key];
+        obj[getEventHandlerName(key)] = createEventHandler(value, options);
+    }
+    return obj;
+}

package/dist/sdk/functions/get-block-component-options.d.ts

@@ -0,0 +1,2 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getBlockComponentOptions(block: BuilderBlock): any;

package/dist/sdk/functions/get-block-component-options.js

@@ -0,0 +1,10 @@
+export function getBlockComponentOptions(block) {
+    return {
+        ...block.component?.options,
+        ...block.options,
+        /**
+         * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+         */
+        builderBlock: block,
+    };
+}

package/dist/sdk/functions/get-block-properties.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getBlockProperties(block: BuilderBlock): {
+    'builder-id': string;
+    style: string | Partial<CSSStyleDeclaration>;
+    class: string;
+    href: any;
+};

package/dist/sdk/functions/get-block-properties.js

@@ -0,0 +1,66 @@
+import { TARGET } from '../constants/target.js';
+import { convertStyleMapToCSSArray } from '../helpers/css.js';
+import { transformBlockProperties } from './transform-block-properties.js';
+const extractRelevantRootBlockProperties = (block) => {
+    // currently we are only spreading the `href` property
+    // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
+    // const {
+    //   '@type': _type,
+    //   '@version': _version,
+    //   id: _id,
+    //   tagName: _tagName,
+    //   layerName: _layerName,
+    //   groupLocked: _groupLocked,
+    //   layerLocked: _layerLocked,
+    //   class: _class,
+    //   children: _children,
+    //   responsiveStyles: _responsiveStyles,
+    //   component: _component,
+    //   bindings: _bindings,
+    //   meta: _meta,
+    //   actions: _actions,
+    //   properties: _properties,
+    //   code: _code,
+    //   repeat: _repeat,
+    //   animations: _animations,
+    //   style: _style,
+    //   hide: _hide,
+    //   show: _show,
+    //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
+    //   ...remainingBlockProperties
+    // } = block;
+    return { href: block.href };
+};
+export function getBlockProperties(block) {
+    const properties = {
+        ...extractRelevantRootBlockProperties(block),
+        ...block.properties,
+        'builder-id': block.id,
+        style: getStyleAttribute(block.style),
+        class: [block.id, 'builder-block', block.class, block.properties?.class]
+            .filter(Boolean)
+            .join(' '),
+    };
+    return transformBlockProperties(properties);
+}
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */
+function getStyleAttribute(style) {
+    if (!style) {
+        return undefined;
+    }
+    switch (TARGET) {
+        case 'svelte':
+        case 'vue2':
+        case 'vue3':
+        case 'solid':
+            return convertStyleMapToCSSArray(style).join(' ');
+        case 'qwik':
+        case 'reactNative':
+        case 'react':
+            return style;
+    }
+}

package/dist/sdk/functions/get-builder-search-params/fn.test.js

@@ -0,0 +1,13 @@
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from '.';
+const querystring = 'someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017';
+const url = new URL(`localhost:3000/about-us?${querystring}`);
+describe('Get Builder SearchParams', () => {
+    test('correctly converts URLSearchParams to object', () => {
+        const output = convertSearchParamsToQueryObject(url.searchParams);
+        expect(output).toMatchSnapshot();
+    });
+    test('correctly extracts all builder params from a query object', () => {
+        const output = getBuilderSearchParams(convertSearchParamsToQueryObject(url.searchParams));
+        expect(output).toMatchSnapshot();
+    });
+});

package/dist/sdk/functions/get-builder-search-params/index.d.ts

@@ -0,0 +1,6 @@
+type QueryObject = Record<string, string | string[]>;
+export declare const convertSearchParamsToQueryObject: (searchParams: URLSearchParams) => QueryObject;
+export declare const getBuilderSearchParams: (_options: QueryObject | URLSearchParams | undefined) => QueryObject;
+export declare const getBuilderSearchParamsFromWindow: () => QueryObject;
+export declare const normalizeSearchParams: (searchParams: QueryObject | URLSearchParams) => QueryObject;
+export {};

package/dist/sdk/functions/get-builder-search-params/index.js

@@ -0,0 +1,36 @@
+import { isBrowser } from '../is-browser.js';
+const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
+export const convertSearchParamsToQueryObject = (searchParams) => {
+    const options = {};
+    searchParams.forEach((value, key) => {
+        options[key] = value;
+    });
+    return options;
+};
+export const getBuilderSearchParams = (_options) => {
+    if (!_options) {
+        return {};
+    }
+    const options = normalizeSearchParams(_options);
+    const newOptions = {};
+    Object.keys(options).forEach((key) => {
+        if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+            const trimmedKey = key
+                .replace(BUILDER_SEARCHPARAMS_PREFIX, '')
+                .replace(BUILDER_OPTIONS_PREFIX, '');
+            newOptions[trimmedKey] = options[key];
+        }
+    });
+    return newOptions;
+};
+export const getBuilderSearchParamsFromWindow = () => {
+    if (!isBrowser()) {
+        return {};
+    }
+    const searchParams = new URLSearchParams(window.location.search);
+    return getBuilderSearchParams(searchParams);
+};
+export const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams
+    ? convertSearchParamsToQueryObject(searchParams)
+    : searchParams;

package/dist/sdk/functions/get-content/ab-testing.d.ts

@@ -0,0 +1,5 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { CanTrack } from '../../types/can-track.js';
+export declare const handleABTesting: ({ item, canTrack, }: {
+    item: BuilderContent;
+} & CanTrack) => Promise<void>;

package/dist/sdk/functions/get-content/ab-testing.js

@@ -0,0 +1,78 @@
+import { getContentVariationCookie, setContentVariationCookie, } from '../../helpers/ab-tests.js';
+import { checkIsDefined } from '../../helpers/nullable.js';
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
+    checkIsDefined(item.variations) &&
+    Object.keys(item.variations).length > 0;
+/**
+ * Randomly assign a variation to this user and store it in cookies/storage
+ */
+const getRandomVariationId = ({ id, variations, }) => {
+    let n = 0;
+    const random = Math.random();
+    // loop over variations test ratios, incrementing a counter,
+    // until we find the variation that this user should be assigned to
+    for (const id in variations) {
+        const testRatio = variations[id]?.testRatio;
+        n += testRatio;
+        if (random < n) {
+            return id;
+        }
+    }
+    // `item.variations` does not include the default variation
+    // if we arrive here, then it means that the random number fits in the default variation bucket
+    return id;
+};
+const getTestFields = ({ item, testGroupId, }) => {
+    const variationValue = item.variations[testGroupId];
+    if (testGroupId === item.id ||
+        // handle edge-case where `testGroupId` points to non-existing variation
+        !variationValue) {
+        return {
+            testVariationId: item.id,
+            testVariationName: 'Default',
+        };
+    }
+    else {
+        return {
+            data: variationValue.data,
+            testVariationId: variationValue.id,
+            testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : ''),
+        };
+    }
+};
+const getContentVariation = async ({ item, canTrack, }) => {
+    // try to find test variation in cookies/storage
+    const testGroupId = await getContentVariationCookie({
+        canTrack,
+        contentId: item.id,
+    });
+    const testFields = testGroupId
+        ? getTestFields({ item, testGroupId })
+        : undefined;
+    if (testFields) {
+        return testFields;
+    }
+    else {
+        // if variation not found in storage, assign a random variation to this user
+        const randomVariationId = getRandomVariationId({
+            variations: item.variations,
+            id: item.id,
+        });
+        // store variation in cookies/storage
+        setContentVariationCookie({
+            contentId: item.id,
+            value: randomVariationId,
+            canTrack,
+        }).catch((err) => {
+            console.error('could not store A/B test variation: ', err);
+        });
+        return getTestFields({ item, testGroupId: randomVariationId });
+    }
+};
+export const handleABTesting = async ({ item, canTrack, }) => {
+    if (!checkIsBuilderContentWithVariations(item)) {
+        return;
+    }
+    const variationValue = await getContentVariation({ item, canTrack });
+    Object.assign(item, variationValue);
+};

package/dist/sdk/functions/get-content/generate-content-url.d.ts

@@ -0,0 +1,2 @@
+import type { GetContentOptions } from './types.js';
+export declare const generateContentUrl: (options: GetContentOptions) => URL;

package/dist/sdk/functions/get-content/generate-content-url.js

@@ -0,0 +1,31 @@
+import { flatten } from '../../helpers/flatten.js';
+import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
+import { DEFAULT_API_VERSION } from '../../types/api-version';
+export const generateContentUrl = (options) => {
+    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale, apiVersion = DEFAULT_API_VERSION, } = options;
+    if (!apiKey) {
+        throw new Error('Missing API key');
+    }
+    if (!['v2', 'v3'].includes(apiVersion)) {
+        throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+    }
+    const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}`);
+    const queryOptions = {
+        ...getBuilderSearchParamsFromWindow(),
+        ...normalizeSearchParams(options.options || {}),
+    };
+    const flattened = flatten(queryOptions);
+    for (const key in flattened) {
+        url.searchParams.set(key, String(flattened[key]));
+    }
+    if (userAttributes) {
+        url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
+    }
+    if (query) {
+        const flattened = flatten({ query });
+        for (const key in flattened) {
+            url.searchParams.set(key, JSON.stringify(flattened[key]));
+        }
+    }
+    return url;
+};

package/dist/sdk/functions/get-content/generate-content-url.test.js

@@ -0,0 +1,82 @@
+import { generateContentUrl } from './generate-content-url';
+const testKey = 'YJIGb4i01jvw0SRdL5Bt';
+const testModel = 'page';
+const testId = 'c1b81bab59704599b997574eb0736def';
+const options = {
+    cachebust: 'true',
+    noCache: 'true',
+    'overrides.037948e52eaf4743afed464f02c70da4': '037948e52eaf4743afed464f02c70da4',
+    'overrides.page': '037948e52eaf4743afed464f02c70da4',
+    'overrides.page:/': '037948e52eaf4743afed464f02c70da4',
+    preview: 'page',
+};
+describe('Generate Content URL', () => {
+    test('generates the proper value for a simple query', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('Handles overrides correctly', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('generate content url with apiVersion as default', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('generate content url with apiVersion as v2', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: 'v2',
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('generate content url with apiVersion as v3', () => {
+        const output = generateContentUrl({
+            apiKey: testKey,
+            model: testModel,
+            query: { id: testId },
+            options,
+            apiVersion: 'v3',
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('throw error when trying to generate content url with apiVersion as v1', () => {
+        expect(() => {
+            generateContentUrl({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: 'v1',
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
+    });
+    test('throw error when trying to generate content url with an invalid apiVersion value', () => {
+        expect(() => {
+            generateContentUrl({
+                apiKey: testKey,
+                model: testModel,
+                query: { id: testId },
+                options,
+                apiVersion: 'INVALID_API_VERSION',
+            });
+        }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`);
+    });
+});

package/dist/sdk/functions/get-content/index.d.ts

@@ -0,0 +1,11 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { GetContentOptions } from './types.js';
+export declare function getContent(options: GetContentOptions): Promise<BuilderContent | null>;
+type ContentResponse = {
+    results: BuilderContent[];
+} | {
+    status: number;
+    message: string;
+};
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
+export {};

package/dist/sdk/functions/get-content/index.js

@@ -0,0 +1,40 @@
+import { logger } from '../../helpers/logger.js';
+import { fetch } from '../get-fetch.js';
+import { handleABTesting } from './ab-testing.js';
+import { generateContentUrl } from './generate-content-url.js';
+export async function getContent(options) {
+    const allContent = await getAllContent({ ...options, limit: 1 });
+    if (allContent && 'results' in allContent) {
+        return allContent?.results[0] || null;
+    }
+    return null;
+}
+export async function getAllContent(options) {
+    try {
+        const url = generateContentUrl(options);
+        const res = await fetch(url.href);
+        const content = await res.json();
+        if ('status' in content && !('results' in content)) {
+            logger.error('Error fetching data. ', { url, content, options });
+            return content;
+        }
+        const canTrack = options.canTrack !== false;
+        try {
+            if (canTrack &&
+                // This makes sure we have a non-error response with the results array.
+                Array.isArray(content.results)) {
+                for (const item of content.results) {
+                    await handleABTesting({ item, canTrack });
+                }
+            }
+        }
+        catch (e) {
+            logger.error('Could not setup A/B testing. ', e);
+        }
+        return content;
+    }
+    catch (error) {
+        logger.error('Error fetching data. ', error);
+        return null;
+    }
+}

package/dist/sdk/functions/get-content/types.d.ts

@@ -0,0 +1,45 @@
+export interface GetContentOptions {
+    /** The model to get content for */
+    model: string;
+    /** Your public API key */
+    apiKey: string;
+    /** Number of items to fetch. Default is 1 */
+    limit?: number;
+    /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
+    userAttributes?: (Record<string, string> & {
+        urlPath?: string;
+    }) | null;
+    /** Custom query */
+    query?: Record<string, any>;
+    /**
+     * Any other API options.
+     * Accepts both a key/value object or a `URLSearchParams` instance
+     * */
+    options?: Record<string, any> | URLSearchParams;
+    /**
+     * If set to `true`, it will lazy load symbols/references.
+     * If set to `false`, it will render the entire content tree eagerly.
+     */
+    noTraverse?: boolean;
+    /**
+     * If set to `false`, it will not use cookies to target content. Therefore, A/B Testing will be disabled and
+     * only the default variation will be returned to every user.
+     *
+     * Defaults to `true`.
+     */
+    canTrack?: boolean;
+    /**
+     * Include references in the response. Defaults to `true`.
+     */
+    includeRefs?: boolean;
+    /**
+     * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
+     */
+    locale?: string;
+    /**
+     * If provided, sets the Builder API version used to fetch content.
+     *
+     * Defaults to `v3`.
+     */
+    apiVersion?: 'v2' | 'v3';
+}

package/dist/sdk/functions/get-fetch.d.ts

@@ -0,0 +1 @@
+export declare const fetch: typeof globalThis.fetch;

package/dist/sdk/functions/get-fetch.js

@@ -0,0 +1,11 @@
+import { getGlobalThis } from './get-global-this.js';
+function getFetch() {
+    const globalFetch = getGlobalThis().fetch;
+    if (typeof globalFetch === 'undefined') {
+        console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+        throw new Error('Builder SDK could not find a global `fetch` function');
+    }
+    return globalFetch;
+}
+export const fetch = getFetch();

package/dist/sdk/functions/get-global-this.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="node" />
+type Global = typeof global | typeof window | typeof self | typeof globalThis;
+export declare function getGlobalThis(): Global;
+export {};

package/dist/sdk/functions/get-global-this.js

@@ -0,0 +1,15 @@
+export function getGlobalThis() {
+    if (typeof globalThis !== 'undefined') {
+        return globalThis;
+    }
+    if (typeof window !== 'undefined') {
+        return window;
+    }
+    if (typeof global !== 'undefined') {
+        return global;
+    }
+    if (typeof self !== 'undefined') {
+        return self;
+    }
+    return globalThis;
+}

package/dist/sdk/functions/get-processed-block.d.ts

@@ -0,0 +1,10 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }: {
+    block: BuilderBlock;
+    /**
+     * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
+     * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
+     */
+    shouldEvaluateBindings: boolean;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock;