@builder.io/sdk-react-nextjs 0.5.7 → 0.5.9

package/dist/blocks/button/button.js

@@ -4,8 +4,8 @@ function Button(props) {
     return (React.createElement(React.Fragment, null,
         props.link ? (React.createElement(React.Fragment, null,
             React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-7267e9c6" }, props.text))),
-        React.createElement("style", null, `.button-7267e9c6 {
+            React.createElement("button", { ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-3e7bc8b2" }, props.text))),
+        React.createElement("style", null, `.button-3e7bc8b2 {
   all: unset;
 }`)));
 }

package/dist/blocks/columns/columns.js

@@ -100,17 +100,17 @@ function Columns(props) {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-3ec60680", style: columnsCssVars() },
+                " div-cc9939b0", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(InlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-3ec60680-2", style: columnCssVars(index), key: index },
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-cc9939b0-2", style: columnCssVars(index), key: index },
                 React.createElement(Blocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     }, context: props.builderContext, registeredComponents: props.builderComponents }))))),
-        React.createElement("style", null, `.div-3ec60680 {
+        React.createElement("style", null, `.div-cc9939b0 {
   display: flex;
   line-height: normal;
-}.div-3ec60680-2 {
+}.div-cc9939b0-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/blocks/image/image.js

@@ -52,23 +52,23 @@ function Image(props) {
                         ...aspectRatioCss(),
                     }, className: "builder-image" +
                         (props.className ? " " + props.className : "") +
-                        " img-7c5f6b46", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
+                        " img-ef11a6be", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
             props.aspectRatio &&
                 !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-7c5f6b46", style: {
+                React.createElement("div", { className: "builder-image-sizer div-ef11a6be", style: {
                         paddingTop: props.aspectRatio * 100 + "%",
                     } }))) : null,
             props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
             !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-7c5f6b46-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-7c5f6b46 {
+                React.createElement("div", { className: "div-ef11a6be-2" }, props.children))) : null),
+        React.createElement("style", null, `.img-ef11a6be {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-7c5f6b46 {
+}.div-ef11a6be {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-7c5f6b46-2 {
+}.div-ef11a6be-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/components/blocks/blocks-wrapper.js

@@ -28,8 +28,8 @@ function BlocksWrapper(props) {
         }
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: className() + " div-5285fe33", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() }, props.children),
-        React.createElement("style", null, `.div-5285fe33 {
+        React.createElement("div", { className: className() + " div-5821bd52", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() }, props.children),
+        React.createElement("style", null, `.div-5821bd52 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/components/content/components/enable-editor.js

@@ -13,6 +13,7 @@ import { checkIsDefined } from "../../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
 import { logger } from "../../../helpers/logger.js";
 import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
+import { fastClone } from "../../../functions/fast-clone.js";
 import { useRouter } from "next/navigation";
 function EnableEditor(props) {
     const elementRef = useRef(null);
@@ -154,7 +155,7 @@ function EnableEditor(props) {
         if (isEditing()) {
             window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
                 detail: {
-                    state: props.builderContextSignal.rootState,
+                    state: fastClone(props.builderContextSignal.rootState),
                     ref: {
                         name: props.model,
                     },

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

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

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

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

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

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

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.5.7";
+export declare const SDK_VERSION = "0.5.9";

package/dist/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.5.7";
+export const SDK_VERSION = "0.5.9";

package/dist/functions/evaluate/browser-runtime/browser.d.ts

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

package/dist/functions/evaluate/browser-runtime/browser.js

@@ -0,0 +1,31 @@
+import { getFunctionArguments } from '../helpers.js';
+export const runInBrowser = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
+    const functionArgs = getFunctionArguments({
+        builder,
+        context,
+        event,
+        state: flattenState(rootState, localState, rootSetState)
+    });
+    return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
+};
+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/evaluate/evaluate.d.ts

@@ -1,10 +1,6 @@
-import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
-import type { ExecutorArgs } from './types.js';
-export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: {
-    code: string;
+import type { ExecutorArgs } from './helpers.js';
+export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
     event?: Event;
     isExpression?: boolean;
-} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): any;
-export declare const runInBrowser: ({ useCode, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;
-export declare const runInNode: (args: ExecutorArgs) => any;
-export declare function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState;
+};
+export declare function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression }: EvaluatorArgs): any;

package/dist/functions/evaluate/evaluate.js

@@ -1,8 +1,10 @@
 import { logger } from '../../helpers/logger.js';
 import { isBrowser } from '../is-browser.js';
 import { isEditing } from '../is-editing.js';
-import { isNonNodeServer } from '../is-non-node-server.js';
+import { getUserAttributes } from '../track/helpers.js';
+import { runInBrowser } from './browser-runtime/browser.js';
 import { runInNonNode } from './non-node-runtime/index.js';
+import { isNonNodeServer } from '../is-non-node-server.js';
 export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
     if (code === '') {
         logger.warn('Skipping evaluation of empty code block.');
@@ -11,7 +13,8 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
     const builder = {
         isEditing: isEditing(),
         isBrowser: isBrowser(),
-        isServer: !isBrowser()
+        isServer: !isBrowser(),
+        getUserAttributes: () => getUserAttributes()
     };
     // Be able to handle simple expressions like "state.foo" or "1 + 1"
     // as well as full blocks like "var foo = "bar"; return foo"
@@ -20,7 +23,7 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
     isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
     const useCode = useReturn ? `return (${code});` : code;
     const args = {
-        useCode,
+        code: useCode,
         builder,
         context,
         event,
@@ -28,43 +31,17 @@ export function evaluate({ code, context, localState, rootState, rootSetState, e
         rootState,
         localState
     };
-    if (isBrowser())
-        return runInBrowser(args);
-    if (isNonNodeServer())
-        return runInNonNode(args);
-    return runInNode(args);
-}
-export const runInBrowser = ({ useCode, builder, context, event, localState, rootSetState, rootState }) => {
-    const state = flattenState(rootState, localState, rootSetState);
     try {
-        return new Function('builder', 'Builder' /* <- legacy */, 'state', 'context', 'event', useCode)(builder, builder, state, context, event);
+        if (isBrowser())
+            return runInBrowser(args);
+        if (isNonNodeServer())
+            return runInNonNode(args);
+        return runInBrowser(args);
     }
     catch (e) {
-        logger.warn('Builder custom code error: \n While Evaluating: \n ', useCode, '\n', e);
-    }
-};
-export const runInNode = (args) => {
-    // TO-DO: use vm-isolate
-    return runInBrowser(args);
-};
-export function flattenState(rootState, localState, rootSetState) {
-    if (rootState === localState) {
-        throw new Error('rootState === localState');
+        logger.error('Failed code evaluation: ' + e.message, {
+            code
+        });
+        return undefined;
     }
-    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/evaluate/helpers.d.ts

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

package/dist/functions/evaluate/helpers.js

@@ -0,0 +1,10 @@
+export const getFunctionArguments = ({ builder, context, event, state }) => {
+    return Object.entries({
+        state,
+        Builder: builder,
+        // legacy
+        builder,
+        context,
+        event
+    });
+};

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

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

package/dist/functions/evaluate/index.js

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

package/dist/functions/evaluate/non-node-runtime/non-node-runtime.d.ts

@@ -1,2 +1,2 @@
-import type { ExecutorArgs } from '../types';
-export declare const runInNonNode: ({ builder, context, event, rootState, localState, rootSetState, useCode }: ExecutorArgs) => any;
+import type { ExecutorArgs } from '../helpers.js';
+export declare const runInNonNode: ({ builder, context, event, rootState, localState, rootSetState, code }: ExecutorArgs) => any;

package/dist/functions/evaluate/non-node-runtime/non-node-runtime.js

@@ -1,6 +1,7 @@
-import { logger } from '../../../helpers/logger';
-import { set } from '../../set';
-import Interpreter from '../acorn-interpreter.js';
+import { logger } from '../../../helpers/logger.js';
+import { set } from '../../set.js';
+import Interpreter from './acorn-interpreter.js';
+import { getFunctionArguments } from '../helpers.js';
 const processCode = (code) => {
     return code.split('\n').map(line => {
         const trimmed = line.trim();
@@ -21,23 +22,22 @@ const processCode = (code) => {
     }).filter(Boolean).join('\n');
 };
 const getJSONValName = (val) => val + 'JSON';
-export const runInNonNode = ({ builder, context, event, rootState, localState, rootSetState, useCode }) => {
+export const runInNonNode = ({ builder, context, event, rootState, localState, rootSetState, code }) => {
     const state = {
         ...rootState,
         ...localState
     };
-    const properties = {
-        state,
-        Builder: builder,
+    const properties = getFunctionArguments({
         builder,
         context,
-        event
-    };
+        event,
+        state
+    });
     /**
      * Deserialize all properties from JSON strings to JS objects
      */
-    const prependedCode = Object.keys(properties).map(key => `var ${key} = JSON.parse(${getJSONValName(key)});`).join('\n');
-    const cleanedCode = processCode(useCode);
+    const prependedCode = properties.map(([key]) => `var ${key} = JSON.parse(${getJSONValName(key)});`).join('\n');
+    const cleanedCode = processCode(code);
     if (cleanedCode === '') {
         logger.warn('Skipping evaluation of empty code block.');
         return;
@@ -58,8 +58,7 @@ theFunction();
         /**
          * serialize all function args to JSON strings
          */
-        Object.keys(properties).forEach(key => {
-            const val = properties[key] || {};
+        properties.forEach(([key, val]) => {
             const jsonVal = JSON.stringify(val);
             interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
         });

package/dist/functions/fetch-builder-props.d.ts

@@ -1,4 +1,4 @@
-import type { ContentVariantsProps } from '../components/content-variants/content-variants.types.js';
+import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types.js';
 import type { Dictionary } from '../types/typescript.js';
 import type { GetContentOptions } from './get-content/types.js';
 type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
@@ -35,5 +35,5 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
 /**
  * Fetches builder content, and returns it along with sensible defaults for other props that `Content` needs to render.
  */
-export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsProps>;
+export declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 export {};

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

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

package/dist/functions/register-component.js

@@ -16,7 +16,7 @@ export function registerComponent(component, info) {
 }
 export const createRegisterComponentMessage = (info) => ({
     type: 'builder.registerComponent',
-    data: info
+    data: serializeComponentInfo(info)
 });
 // eslint-disable-next-line @typescript-eslint/ban-types
 const serializeFn = (fnValue) => {

package/dist/index.d.ts

@@ -1,16 +1,7 @@
 export * from './index-helpers/top-of-file.js';
 export * from './index-helpers/blocks-exports.js';
-export { isEditing } from './functions/is-editing.js';
-export { isPreviewing } from './functions/is-previewing.js';
-export { createRegisterComponentMessage } from './functions/register-component.js';
-export { register } from './functions/register.js';
-export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
-export { setEditorSettings } from './functions/set-editor-settings.js';
-export type { Settings } from './functions/set-editor-settings.js';
-export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
-export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track/index.js';
-export type { RegisteredComponent } from './context/types.js';
-export type { ComponentInfo } from './types/components.js';
-export type { ContentProps } from './components/content/content.types.js';
-export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+/**
+ * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
+ * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
+ */
+export * from './server-index.js';

package/dist/index.js

@@ -1,11 +1,7 @@
 export * from './index-helpers/top-of-file.js';
 export * from './index-helpers/blocks-exports.js';
-export { isEditing } from './functions/is-editing.js';
-export { isPreviewing } from './functions/is-previewing.js';
-export { createRegisterComponentMessage } from './functions/register-component.js';
-export { register } from './functions/register.js';
-export { setEditorSettings } from './functions/set-editor-settings.js';
-export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
-export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
-export { track } from './functions/track/index.js';
-export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+/**
+ * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
+ * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
+ */
+export * from './server-index.js';

package/dist/server-index.d.ts

@@ -0,0 +1,15 @@
+export * from './index-helpers/top-of-file.js';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export type { Settings } from './functions/set-editor-settings.js';
+export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track/index.js';
+export type { RegisteredComponent } from './context/types.js';
+export type { ComponentInfo } from './types/components.js';
+export type { ContentProps } from './components/content/content.types.js';
+export { fetchBuilderProps } from './functions/fetch-builder-props.js';

package/dist/server-index.js

@@ -0,0 +1,10 @@
+export * from './index-helpers/top-of-file.js';
+export { isEditing } from './functions/is-editing.js';
+export { isPreviewing } from './functions/is-previewing.js';
+export { createRegisterComponentMessage } from './functions/register-component.js';
+export { register } from './functions/register.js';
+export { setEditorSettings } from './functions/set-editor-settings.js';
+export { fetchEntries, fetchOneEntry, getAllContent, getContent, _processContentResult } from './functions/get-content/index.js';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track/index.js';
+export { fetchBuilderProps } from './functions/fetch-builder-props.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-nextjs",
   "description": "Builder.io SDK for React",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "files": [
     "dist"
   ],

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

@@ -1,11 +0,0 @@
-import type { BuilderContextInterface } from '../../context/types';
-export type ExecutorArgs = Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'> & {
-    useCode: string;
-    builder: {
-        isEditing: boolean | undefined;
-        isBrowser: boolean | undefined;
-        isServer: boolean | undefined;
-    };
-    event: Event | undefined;
-};
-export type Executor = (args: ExecutorArgs) => any;

package/dist/functions/evaluate/types.js

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