@builder.io/sdk-react-nextjs 0.5.8 → 0.6.0

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

@@ -1,10 +0,0 @@
-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;
-    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;

package/dist/functions/evaluate/evaluate.js

@@ -1,70 +0,0 @@
-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 { runInNonNode } from './non-node-runtime/index.js';
-export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true }) {
-    if (code === '') {
-        logger.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;
-    const args = {
-        useCode,
-        builder,
-        context,
-        event,
-        rootSetState,
-        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);
-    }
-    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');
-    }
-    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/index.d.ts

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

package/dist/functions/evaluate/index.js

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

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

@@ -1 +0,0 @@
-export { runInNonNode } from './non-node-runtime.js';

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

@@ -1,2 +0,0 @@
-// TEMPORARY FIX UNTIL we fix dynamic imports
-export { runInNonNode } from './non-node-runtime.js';

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

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

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

@@ -1,84 +0,0 @@
-import { logger } from '../../../helpers/logger';
-import { set } from '../../set';
-import Interpreter from '../acorn-interpreter.js';
-const processCode = (code) => {
-    return code.split('\n').map(line => {
-        const trimmed = line.trim();
-        // this async wrapper doesn't work in JS-interpreter, so we drop it.
-        if (line.includes('__awaiter'))
-            return undefined;
-        // we find all state setter expressions and append a call to setRootState afterwards
-        const isStateSetter = trimmed.startsWith('state.');
-        if (!isStateSetter)
-            return line;
-        const [lhs, rhs] = trimmed.split('=');
-        const setStr = lhs.replace('state.', '').trim();
-        const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
-        return `
-  ${line}
-  ${setExpr}
-  `;
-    }).filter(Boolean).join('\n');
-};
-const getJSONValName = (val) => val + 'JSON';
-export const runInNonNode = ({ builder, context, event, rootState, localState, rootSetState, useCode }) => {
-    const state = {
-        ...rootState,
-        ...localState
-    };
-    const properties = {
-        state,
-        Builder: builder,
-        builder,
-        context,
-        event
-    };
-    /**
-     * 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);
-    if (cleanedCode === '') {
-        logger.warn('Skipping evaluation of empty code block.');
-        return;
-    }
-    const transformed = `
-function theFunction() {
-  ${prependedCode}
-
-  ${cleanedCode}
-}
-theFunction();
-`;
-    const setRootState = (prop, value) => {
-        const newState = set(state, prop, value);
-        rootSetState?.(newState);
-    };
-    const initFunc = function (interpreter, globalObject) {
-        /**
-         * serialize all function args to JSON strings
-         */
-        Object.keys(properties).forEach(key => {
-            const val = properties[key] || {};
-            const jsonVal = JSON.stringify(val);
-            interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
-        });
-        /**
-         * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
-         * state property is set. This function will update the state object.
-         */
-        interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
-    };
-    try {
-        const myInterpreter = new Interpreter(transformed, initFunc);
-        myInterpreter.run();
-        const output = myInterpreter.pseudoToNative(myInterpreter.value);
-        return output;
-    }
-    catch (e) {
-        logger.warn('Custom code error in non-node runtime. SDK can only execute ES5 JavaScript.', {
-            e
-        });
-        return;
-    }
-};

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 {};

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

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

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

@@ -1,22 +0,0 @@
-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/functions/fast-clone.js

@@ -1,4 +0,0 @@
-/**
- * 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/functions/fetch-builder-props.js

@@ -1,25 +0,0 @@
-import { getBuilderSearchParams } from './get-builder-search-params/index.js';
-import { fetchOneEntry } from './get-content/index.js';
-/**
- * Fetches builder content, and returns it along with sensible defaults for other props that `Content` needs to render.
- */
-export const fetchBuilderProps = async (_args) => {
-    const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;
-    const getContentArgs = {
-        ..._args,
-        apiKey: _args.apiKey,
-        model: _args.model || 'page',
-        userAttributes: {
-            ..._args.userAttributes,
-            ...(urlPath ? {
-                urlPath
-            } : {})
-        },
-        options: getBuilderSearchParams(_args.searchParams || _args.url?.searchParams || _args.options)
-    };
-    return {
-        apiKey: getContentArgs.apiKey,
-        model: getContentArgs.model,
-        content: await fetchOneEntry(getContentArgs)
-    };
-};

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

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

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

@@ -1,28 +0,0 @@
-import { TARGET } from '../constants/target.js';
-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];
-        let eventHandlerName = getEventHandlerName(key);
-        if (options.stripPrefix) {
-            switch (TARGET) {
-                case 'vue2':
-                case 'vue3':
-                    eventHandlerName = eventHandlerName.replace('v-on:', '');
-                    break;
-                case 'svelte':
-                    eventHandlerName = eventHandlerName.replace('on:', '');
-                    break;
-            }
-        }
-        obj[eventHandlerName] = createEventHandler(value, options);
-    }
-    return obj;
-}

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

@@ -1,10 +0,0 @@
-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/functions/get-block-properties.js

@@ -1,72 +0,0 @@
-import { TARGET } from '../constants/target.js';
-import { convertStyleMapToCSSArray } from '../helpers/css.js';
-import { getReactNativeBlockStyles } from './get-react-native-block-styles.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, context }) {
-    const properties = {
-        ...extractRelevantRootBlockProperties(block),
-        ...block.properties,
-        'builder-id': block.id,
-        style: block.style ? getStyleAttribute(block.style) : undefined,
-        class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
-    };
-    if (TARGET === 'reactNative') {
-        properties.style = getReactNativeBlockStyles({
-            block,
-            context,
-            blockStyles: properties.style
-        });
-    }
-    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) {
-    switch (TARGET) {
-        case 'svelte':
-        case 'vue2':
-        case 'vue3':
-        case 'solid':
-            return convertStyleMapToCSSArray(style).join(' ');
-        case 'qwik':
-        case 'reactNative':
-        case 'react':
-        case 'rsc':
-            return style;
-    }
-}

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

@@ -1,38 +0,0 @@
-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;
-};
-/**
- * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
- * relevant to the Builder SDK.
- *
- * @returns
- */
-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/functions/get-content/generate-content-url.js

@@ -1,33 +0,0 @@
-import { flatten } from '../../helpers/flatten.js';
-import { getBuilderSearchParamsFromWindow, normalizeSearchParams } from '../get-builder-search-params/index.js';
-import { DEFAULT_API_VERSION } from '../../types/api-version.js';
-export const generateContentUrl = (options) => {
-    const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, enrich, 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}` : ''}${enrich ? `&enrich=${enrich}` : ''}`);
-    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/functions/get-content/index.js

@@ -1,100 +0,0 @@
-import { TARGET } from '../../constants/target.js';
-import { handleABTesting } from '../../helpers/ab-tests.js';
-import { getDefaultCanTrack } from '../../helpers/canTrack.js';
-import { logger } from '../../helpers/logger.js';
-import { getPreviewContent } from '../../helpers/preview-lru-cache/get.js';
-import { fetch } from '../get-fetch.js';
-import { isBrowser } from '../is-browser.js';
-import { generateContentUrl } from './generate-content-url.js';
-const checkContentHasResults = (content) => 'results' in content;
-/**
- * Returns a the first entry that matches the given options.
- */
-export async function fetchOneEntry(options) {
-    const allContent = await fetchEntries({
-        ...options,
-        limit: 1
-    });
-    if (allContent) {
-        return allContent.results[0] || null;
-    }
-    return null;
-}
-/**
- * @deprecated
- * Consider using `fetchBuilderProps` instead for easier setup.
- *
- * NOTE: `getContent` was renamed to `fetchOneEntry` and will be removed in a future release.
- */
-export const getContent = fetchOneEntry;
-const _fetchContent = async (options) => {
-    const url = generateContentUrl(options);
-    const res = await fetch(url.href);
-    const content = await res.json();
-    return content;
-};
-/**
- * Exported only for testing purposes. Should not be used directly.
- */
-export const _processContentResult = async (options, content, url = generateContentUrl(options)) => {
-    const canTrack = getDefaultCanTrack(options.canTrack);
-    const isPreviewing = url.search.includes(`preview=`);
-    if (TARGET === 'rsc' && isPreviewing) {
-        const newResults = [];
-        for (const item of content.results) {
-            const previewContent = getPreviewContent(url.searchParams);
-            newResults.push(previewContent || item);
-        }
-        content.results = newResults;
-    }
-    if (!canTrack)
-        return content;
-    if (!(isBrowser() || TARGET === 'reactNative'))
-        return content;
-    /**
-     * For client-side navigations, it is ideal to handle AB testing at this point instead of using our
-     * complex multi-rendering variants approach, which is only needed for SSR'd content.
-     *
-     * This is also where react-native would handle AB testing.
-     */
-    try {
-        const newResults = [];
-        for (const item of content.results) {
-            newResults.push(await handleABTesting({
-                item,
-                canTrack
-            }));
-        }
-        content.results = newResults;
-    }
-    catch (e) {
-        logger.error('Could not process A/B tests. ', e);
-    }
-    return content;
-};
-/**
- * Returns a paginated array of entries that match the given options.
- */
-export async function fetchEntries(options) {
-    try {
-        const url = generateContentUrl(options);
-        const content = await _fetchContent(options);
-        if (!checkContentHasResults(content)) {
-            logger.error('Error fetching data. ', {
-                url,
-                content,
-                options
-            });
-            return null;
-        }
-        return _processContentResult(options, content);
-    }
-    catch (error) {
-        logger.error('Error fetching data. ', error);
-        return null;
-    }
-}
-/**
- * @deprecated Use `fetchEntries` instead.
- */
-export const getAllContent = fetchEntries;

package/dist/functions/get-content/types.js

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

package/dist/functions/get-fetch.js

@@ -1,11 +0,0 @@
-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/functions/get-global-this.js

@@ -1,15 +0,0 @@
-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/functions/get-processed-block.js

@@ -1,46 +0,0 @@
-import { evaluate } from './evaluate/index.js';
-import { fastClone } from './fast-clone.js';
-import { set } from './set.js';
-import { transformBlock } from './transform-block.js';
-const evaluateBindings = ({ block, context, localState, rootState, rootSetState }) => {
-    if (!block.bindings) {
-        return block;
-    }
-    const copy = fastClone(block);
-    const copied = {
-        ...copy,
-        properties: {
-            ...copy.properties
-        },
-        actions: {
-            ...copy.actions
-        }
-    };
-    for (const binding in block.bindings) {
-        const expression = block.bindings[binding];
-        const value = evaluate({
-            code: expression,
-            localState,
-            rootState,
-            rootSetState,
-            context
-        });
-        set(copied, binding, value);
-    }
-    return copied;
-};
-export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
-    const transformedBlock = transformBlock(block);
-    if (shouldEvaluateBindings) {
-        return evaluateBindings({
-            block: transformedBlock,
-            localState,
-            rootState,
-            rootSetState,
-            context
-        });
-    }
-    else {
-        return transformedBlock;
-    }
-}

package/dist/functions/get-react-native-block-styles.js

@@ -1,17 +0,0 @@
-import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-export function getReactNativeBlockStyles({ block, context, blockStyles }) {
-    const responsiveStyles = block.responsiveStyles;
-    if (!responsiveStyles) {
-        return {};
-    }
-    const styles = {
-        // recursively apply inherited styles so that they can be passed down to children `Text` blocks
-        ...context.inheritedStyles,
-        ...(responsiveStyles.large || {}),
-        ...(responsiveStyles.medium || {}),
-        ...(responsiveStyles.small || {}),
-        ...blockStyles
-    };
-    const newStyles = sanitizeReactNativeBlockStyles(styles);
-    return newStyles;
-}

package/dist/functions/is-browser.js

@@ -1,3 +0,0 @@
-export function isBrowser() {
-    return typeof window !== 'undefined' && typeof document !== 'undefined';
-}