@builder.io/sdk-react-nextjs 0.4.5

package/dist/components/content-variants/content-variants.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
+import ContentComponent from "../content/content.js";
+import { getDefaultCanTrack } from "../../helpers/canTrack.js";
+import InlinedStyles from "../inlined-styles.js";
+import { handleABTestingSync } from "../../helpers/ab-tests.js";
+import InlinedScript from "../inlined-script.js";
+import { TARGET } from "../../constants/target.js";
+function ContentVariants(props) {
+    const shouldRenderVariants = checkShouldRunVariants({
+        canTrack: getDefaultCanTrack(props.canTrack),
+        content: props.content,
+    });
+    const variantScriptStr = function variantScriptStr() {
+        return getVariantsScriptString(getVariants(props.content).map((value) => ({
+            id: value.testVariationId,
+            testRatio: value.testRatio,
+        })), props.content?.id || "");
+    };
+    const hideVariantsStyleString = function hideVariantsStyleString() {
+        return getVariants(props.content)
+            .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+            .join("");
+    };
+    return (React.createElement(React.Fragment, null,
+        !props.__isNestedRender && TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+            React.createElement(InlinedScript, { scriptStr: getScriptString() }))) : null,
+        shouldRenderVariants ? (React.createElement(React.Fragment, null,
+            React.createElement(InlinedStyles, { id: `variants-styles-${props.content?.id}`, styles: hideVariantsStyleString() }),
+            React.createElement(InlinedScript, { scriptStr: variantScriptStr() }),
+            getVariants(props.content)?.map((variant) => (React.createElement(ContentComponent, { key: variant.testVariationId, content: variant, showContent: false, classNameProp: undefined, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants }))))) : null,
+        React.createElement(ContentComponent, { content: shouldRenderVariants
+                ? props.content
+                : handleABTestingSync({
+                    item: props.content,
+                    canTrack: getDefaultCanTrack(props.canTrack),
+                }), classNameProp: `variant-${props.content?.id}`, showContent: true, model: props.model, data: props.data, context: props.context, apiKey: props.apiKey, apiVersion: props.apiVersion, customComponents: props.customComponents, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, isSsrAbTest: shouldRenderVariants })));
+}
+export default ContentVariants;

package/dist/components/content-variants/content-variants.types.d.ts

@@ -0,0 +1,20 @@
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types.js';
+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 {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    apiVersion?: ApiVersion;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    /** @deprecated use `enrich` instead **/
+    includeRefs?: boolean;
+    enrich?: boolean;
+}

package/dist/components/content-variants/content-variants.types.js

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

package/dist/components/content-variants/helpers.d.ts

@@ -0,0 +1,41 @@
+import type { Nullable } from '../../helpers/nullable.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+export declare const getVariants: (content: Nullable<BuilderContent>) => {
+    testVariationId: string;
+    id: string;
+    data?: {
+        [key: string]: any;
+        title?: string;
+        blocks?: import("../../types/builder-block.js").BuilderBlock[];
+        inputs?: import("../../types/input.js").Input[];
+        state?: {
+            [key: string]: any;
+        };
+        jsCode?: string;
+        tsCode?: string;
+        httpRequests?: {
+            [key: string]: string;
+        };
+    };
+    name?: string;
+    testRatio?: number;
+    meta?: {
+        [key: string]: any;
+        breakpoints?: import("../../types/builder-content.js").Breakpoints;
+    };
+}[];
+export declare const checkShouldRunVariants: ({ canTrack, content }: {
+    canTrack: Nullable<boolean>;
+    content: Nullable<BuilderContent>;
+}) => boolean;
+type VariantData = {
+    id: string;
+    testRatio?: number;
+};
+export declare const getScriptString: () => string;
+export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ contentId, variationId }: {
+    variationId: string;
+    contentId: string;
+}) => string;
+export {};

package/dist/components/content-variants/helpers.js

@@ -0,0 +1,188 @@
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../../functions/is-browser.js';
+export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({ ...variant,
+    testVariationId: variant.id,
+    id: content?.id
+}));
+export const checkShouldRunVariants = ({ canTrack, content }) => {
+    const hasVariants = getVariants(content).length > 0;
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
+        return false;
+    if (!hasVariants)
+        return false;
+    if (!canTrack)
+        return false;
+    /**
+     * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+     * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
+     * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
+     *
+     * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+     */
+    if (TARGET === 'vue2' || TARGET === 'vue3')
+        return true;
+    if (isBrowser())
+        return false;
+    return true;
+};
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrAbTest(contentId, variants, isHydrationTarget) {
+    function getAndSetVariantId() {
+        function setCookie(name, value, days) {
+            let expires = '';
+            if (days) {
+                const date = new Date();
+                date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+                expires = '; expires=' + date.toUTCString();
+            }
+            document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
+        }
+        function getCookie(name) {
+            const nameEQ = name + '=';
+            const ca = document.cookie.split(';');
+            for (let i = 0; i < ca.length; i++) {
+                let c = ca[i];
+                while (c.charAt(0) === ' ')
+                    c = c.substring(1, c.length);
+                if (c.indexOf(nameEQ) === 0)
+                    return c.substring(nameEQ.length, c.length);
+            }
+            return null;
+        }
+        const cookieName = `builder.tests.${contentId}`;
+        const variantInCookie = getCookie(cookieName);
+        const availableIDs = variants.map(vr => vr.id).concat(contentId);
+        /**
+         * cookie already exists
+         */
+        if (variantInCookie && availableIDs.includes(variantInCookie)) {
+            return variantInCookie;
+        }
+        /**
+         * no cookie exists, find variant
+         */
+        let n = 0;
+        const random = Math.random();
+        for (let i = 0; i < variants.length; i++) {
+            const variant = variants[i];
+            const testRatio = variant.testRatio;
+            n += testRatio;
+            if (random < n) {
+                setCookie(cookieName, variant.id);
+                return variant.id;
+            }
+        }
+        /**
+         * no variant found, assign default content
+         */
+        setCookie(cookieName, contentId);
+        return contentId;
+    }
+    const winningVariantId = getAndSetVariantId();
+    const styleEl = document.currentScript?.previousElementSibling;
+    /**
+     * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
+     */
+    if (isHydrationTarget) {
+        styleEl.remove();
+        const thisScriptEl = document.currentScript;
+        thisScriptEl?.remove();
+    }
+    else {
+        /* update styles to hide all variants except the winning variant */
+        const newStyleStr = variants.concat({
+            id: contentId
+        }).filter(variant => variant.id !== winningVariantId).map(value => {
+            return `.variant-${value.id} {  display: none; }
+        `;
+        }).join('');
+        styleEl.innerHTML = newStyleStr;
+    }
+}
+/**
+ * NOTE: when this function is stringified, single-line comments can cause weird issues when compiled by Sveltekit.
+ * Make sure to write multi-line comments only.
+ */
+function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
+    if (!navigator.cookieEnabled) {
+        return;
+    }
+    function getCookie(name) {
+        const nameEQ = name + '=';
+        const ca = document.cookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) === ' ')
+                c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) === 0)
+                return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+    }
+    const cookieName = `builder.tests.${defaultContentId}`;
+    const variantId = getCookie(cookieName);
+    const parentDiv = document.currentScript?.parentElement;
+    const variantIsDefaultContent = variantContentId === defaultContentId;
+    if (variantId === variantContentId) {
+        if (variantIsDefaultContent) {
+            /** the default content is already visible, no need to do anything */
+            return;
+        }
+        /** this is the winning variant and not already visible: remove `hidden` and `aria-hidden` attr */
+        parentDiv?.removeAttribute('hidden');
+        parentDiv?.removeAttribute('aria-hidden');
+    }
+    else {
+        if (variantIsDefaultContent) {
+            if (isHydrationTarget) {
+                /**
+                 * For React to work, we need to support hydration, in which case the first CSR will have none of the hidden variants.
+                 * So we completely remove that node.
+                 */
+                parentDiv?.remove();
+            }
+            else {
+                /** this is not the winning variant, add `hidden` attr */
+                parentDiv?.setAttribute('hidden', 'true');
+                parentDiv?.setAttribute('aria-hidden', 'true');
+            }
+        }
+        /** This is not the winning variant, and it's not the default content.
+         * There's no need to hide it, because it's already hidden.
+         */
+        return;
+    }
+    return;
+}
+const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
+const isHydrationTarget = getIsHydrationTarget(TARGET);
+/**
+ * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
+ * Some bundlers will minify the fn name, etc.
+ *
+ * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
+ */
+const AB_TEST_FN_NAME = 'builderIoAbTest';
+const CONTENT_FN_NAME = 'builderIoRenderContent';
+export const getScriptString = () => {
+    const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
+    const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
+    return `
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
+  `;
+};
+export const getVariantsScriptString = (variants, contentId) => {
+    return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
+export const getRenderContentScriptString = ({ contentId, variationId }) => {
+    return `
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
+};

package/dist/components/inlined-script.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    scriptStr: string;
+    id?: string;
+}
+declare function InlinedScript(props: Props): JSX.Element;
+export default InlinedScript;

package/dist/components/inlined-script.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+function InlinedScript(props) {
+    return (React.createElement("script", { dangerouslySetInnerHTML: { __html: props.scriptStr }, id: props.id }));
+}
+export default InlinedScript;

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

@@ -0,0 +1,6 @@
+interface Props {
+    styles: string;
+    id?: string;
+}
+declare function InlinedStyles(props: Props): JSX.Element;
+export default InlinedStyles;

package/dist/components/inlined-styles.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+function InlinedStyles(props) {
+    return (React.createElement("style", { dangerouslySetInnerHTML: { __html: props.styles }, id: props.id }));
+}
+export default InlinedStyles;

package/dist/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/constants/builder-registered-components.js

@@ -0,0 +1,60 @@
+import { default as Button } from '../blocks/button/button.js';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
+import { default as Columns } from '../blocks/columns/columns.js';
+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.js';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
+import { default as Image } from '../blocks/image/image.js';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
+import { default as Section } from '../blocks/section/section.js';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
+import { default as Symbol } from '../blocks/symbol/symbol.js';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
+import { default as Text } from '../blocks/text/text.js';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video.js';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed.js';
+import { default as Img } from '../blocks/img/img.js';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.js';
+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/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/constants/device-sizes.js

@@ -0,0 +1,45 @@
+import { fastClone } from '../functions/fast-clone.js';
+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,
+        // TODO: decide upper limit
+        min: largeMin,
+        default: largeMin + 1
+    };
+    return newSizes;
+};

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

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

package/dist/constants/sdk-version.js

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

package/dist/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/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 = 'rsc';

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

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

package/dist/context/builder.context.js

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+export default createContext({
+    content: null,
+    context: {},
+    localState: undefined,
+    rootSetState() { },
+    rootState: {},
+    apiKey: null,
+    apiVersion: undefined,
+    componentInfos: {},
+    inheritedStyles: {},
+});

package/dist/context/types.d.ts

@@ -0,0 +1,35 @@
+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;
+    /**
+     * The state of the application.
+     *
+     * NOTE: see `localState` below to understand how it is different from `rootState`.
+     */
+    rootState: BuilderRenderState;
+    /**
+     * Some frameworks have a `setState` function which needs to be invoked to notify
+     * the framework of state change. (other frameworks don't in which case it is `undefined')
+     */
+    rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+    /**
+     * The local state of the current component. This is different from `rootState` in that
+     * it can be a child state created by a repeater containing local state.
+     * The `rootState` is where all of the state mutations are actually stored.
+     */
+    localState: BuilderRenderState | undefined;
+    apiKey: string | null;
+    apiVersion: ApiVersion | undefined;
+    componentInfos: Dictionary<ComponentInfo>;
+    inheritedStyles: Record<string, unknown>;
+}

package/dist/context/types.js

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

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

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

package/dist/functions/apply-patch-with-mutation.js

@@ -0,0 +1,54 @@
+export const applyPatchWithMinimalMutationChain = (obj, patch, preserveRoot = false) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const { path, op, value } = patch;
+    const pathArr = path.split(/\//);
+    if (pathArr[0] === '') {
+        pathArr.shift();
+    }
+    const newObj = preserveRoot ? obj : {
+        ...obj
+    };
+    let objPart = newObj;
+    for (let i = 0; i < pathArr.length; i++) {
+        const isLast = i === pathArr.length - 1;
+        const property = pathArr[i];
+        if (isLast) {
+            if (op === 'replace') {
+                objPart[property] = value;
+            }
+            else if (op === 'add') {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    if (property === '-') {
+                        objPart.push(value);
+                    }
+                    else {
+                        objPart.splice(index, 0, value);
+                    }
+                }
+                else {
+                    objPart[property] = value;
+                }
+            }
+            else if (op === 'remove') {
+                const index = Number(property);
+                if (Array.isArray(objPart)) {
+                    objPart.splice(index, 1);
+                }
+                else {
+                    delete objPart[property];
+                }
+            }
+        }
+        else {
+            const nextProperty = pathArr[i + 1];
+            const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+            objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : {
+                ...newPart
+            };
+        }
+    }
+    return newObj;
+};

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

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

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

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface, BuilderRenderState } from '../context/types.js';
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: {
+    code: string;
+    event?: Event;
+    isExpression?: boolean;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): any;
+export declare function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState;

package/dist/functions/evaluate.js

@@ -0,0 +1,46 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+export function evaluate({ code, context, localState, rootState, rootSetState, 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, flattenState(rootState, localState, rootSetState), context, event);
+    }
+    catch (e) {
+        console.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
+    }
+}
+export function flattenState(rootState, localState, rootSetState) {
+    if (rootState === localState) {
+        throw new Error('rootState === localState');
+    }
+    return new Proxy(rootState, {
+        get: (_, prop) => {
+            if (localState && prop in localState) {
+                return localState[prop];
+            }
+            return rootState[prop];
+        },
+        set: (_, prop, value) => {
+            if (localState && prop in localState) {
+                throw new Error('Writing to local state is not allowed as it is read-only.');
+            }
+            rootState[prop] = value;
+            rootSetState?.(rootState);
+            return true;
+        }
+    });
+}

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

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

package/dist/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)}`;