@builder.io/sdk-react-nextjs 0.4.6-0 → 0.5.1

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

@@ -0,0 +1,2 @@
+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.js

@@ -0,0 +1,84 @@
+import { logger } from '../../helpers/logger';
+import { set } from '../set';
+import Interpreter from './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

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

package/dist/functions/evaluate/types.js

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

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

@@ -11,7 +11,8 @@ const isTextStyle = (key) => {
  * 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
+    const textStyles = {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Object.entries(styles).forEach(([key, value]) => {
         if (isTextStyle(key)) {
             textStyles[key] = value;

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

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

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

@@ -1,8 +1,10 @@
 export function getBlockComponentOptions(block) {
-    return { ...block.component?.options,
+    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 };
+        builderBlock: block
+    };
 }

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

@@ -35,7 +35,8 @@ const extractRelevantRootBlockProperties = (block) => {
     };
 };
 export function getBlockProperties({ block, context }) {
-    const properties = { ...extractRelevantRootBlockProperties(block),
+    const properties = {
+        ...extractRelevantRootBlockProperties(block),
         ...block.properties,
         'builder-id': block.id,
         style: block.style ? getStyleAttribute(block.style) : undefined,

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

@@ -10,7 +10,8 @@ export const generateContentUrl = (options) => {
         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(),
+    const queryOptions = {
+        ...getBuilderSearchParamsFromWindow(),
         ...normalizeSearchParams(options.options || {})
     };
     const flattened = flatten(queryOptions);

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

@@ -4,13 +4,9 @@ export declare function getContent(options: GetContentOptions): Promise<BuilderC
 type ContentResults = {
     results: BuilderContent[];
 };
-type ContentResponse = ContentResults | {
-    status: number;
-    message: string;
-};
 /**
  * Exported only for testing purposes. Should not be used directly.
  */
 export declare const processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<ContentResults>;
-export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResults>;
 export {};

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

@@ -8,10 +8,11 @@ import { isBrowser } from '../is-browser.js';
 import { generateContentUrl } from './generate-content-url.js';
 const checkContentHasResults = (content) => 'results' in content;
 export async function getContent(options) {
-    const allContent = await getAllContent({ ...options,
+    const allContent = await getAllContent({
+        ...options,
         limit: 1
     });
-    if (allContent && checkContentHasResults(allContent)) {
+    if (allContent) {
         return allContent.results[0] || null;
     }
     return null;
@@ -71,7 +72,7 @@ export async function getAllContent(options) {
                 content,
                 options
             });
-            return content;
+            return null;
         }
         return processContentResult(options, content);
     }

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

@@ -1,4 +1,4 @@
-import { evaluate } from './evaluate.js';
+import { evaluate } from './evaluate';
 import { fastClone } from './fast-clone.js';
 import { set } from './set.js';
 import { transformBlock } from './transform-block.js';
@@ -7,10 +7,13 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
         return block;
     }
     const copy = fastClone(block);
-    const copied = { ...copy,
-        properties: { ...copy.properties
+    const copied = {
+        ...copy,
+        properties: {
+            ...copy.properties
         },
-        actions: { ...copy.actions
+        actions: {
+            ...copy.actions
         }
     };
     for (const binding in block.bindings) {

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

@@ -5,6 +5,7 @@ export function getReactNativeBlockStyles({ block, context, blockStyles }) {
         return {};
     }
     const styles = {
+        // recursively apply inherited styles so that they can be passed down to children `Text` blocks
         ...context.inheritedStyles,
         ...(responsiveStyles.large || {}),
         ...(responsiveStyles.medium || {}),

package/dist/functions/is-non-node-server.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Identifies non-node server runtimes (edge, workers, serverless, etc.)
+ */
+export declare function isNonNodeServer(): boolean;

package/dist/functions/is-non-node-server.js

@@ -0,0 +1,8 @@
+import { isBrowser } from './is-browser';
+/**
+ * Identifies non-node server runtimes (edge, workers, serverless, etc.)
+ */
+export function isNonNodeServer() {
+    const hasNode = () => typeof process !== 'undefined' && process?.versions?.node;
+    return !isBrowser() && !hasNode();
+}

package/dist/functions/register-component.js

@@ -17,9 +17,11 @@ export function registerComponent(component, info) {
 export const createRegisterComponentMessage = (info) => ({
     type: 'builder.registerComponent',
     data: info
-}); // eslint-disable-next-line @typescript-eslint/ban-types
+});
+// eslint-disable-next-line @typescript-eslint/ban-types
 const serializeFn = (fnValue) => {
-    const fnStr = fnValue.toString().trim(); // we need to account for a few different fn syntaxes:
+    const fnStr = fnValue.toString().trim();
+    // we need to account for a few different fn syntaxes:
     // 1. `function name(args) => {code}`
     // 2. `name(args) => {code}`
     // 3. `(args) => {}`
@@ -27,8 +29,10 @@ const serializeFn = (fnValue) => {
     return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
 const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-export const serializeComponentInfo = ({ inputs, ...info }) => ({ ...fastClone(info),
-    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({ ...acc,
+export const serializeComponentInfo = ({ inputs, ...info }) => ({
+    ...fastClone(info),
+    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
+        ...acc,
         [key]: serializeValue(value)
     }), {}))
 });

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

@@ -36,7 +36,8 @@ export const sanitizeReactNativeBlockStyles = (styles) => {
                 const newValue = parseFloat(propertyValue);
                 const normalizedValue = normalizeNumber(newValue);
                 if (normalizedValue) {
-                    return { ...acc,
+                    return {
+                        ...acc,
                         [key]: normalizedValue
                     };
                 }
@@ -46,12 +47,14 @@ export const sanitizeReactNativeBlockStyles = (styles) => {
             }
             else if (propertyValue === '0') {
                 // 0 edge case needs to be handled
-                return { ...acc,
+                return {
+                    ...acc,
                     [key]: 0
                 };
             }
         }
-        return { ...acc,
+        return {
+            ...acc,
             [key]: propertyValue
         };
     }, {});

package/dist/functions/track/helpers.js

@@ -5,7 +5,8 @@ const getLocation = () => {
         return null;
     }
     else if (isBrowser()) {
-        const parsedLocation = new URL(location.href); // IE11 bug with parsed path being empty string
+        const parsedLocation = new URL(location.href);
+        // IE11 bug with parsed path being empty string
         // causes issues with our user targeting
         if (parsedLocation.pathname === '') {
             parsedLocation.pathname = '/';

package/dist/functions/track/index.js

@@ -25,7 +25,8 @@ const getTrackingEventData = async ({ canTrack }) => {
 };
 const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
     type: eventType,
-    data: { ...properties,
+    data: {
+        ...properties,
         metadata: {
             url: location.href,
             ...metadata
@@ -64,6 +65,7 @@ export async function _track(eventProps) {
         console.error('Failed to track: ', err);
     });
 }
-export const track = (args) => _track({ ...args,
+export const track = (args) => _track({
+    ...args,
     canTrack: true
 });

package/dist/functions/transform-block.js

@@ -1,3 +1,4 @@
+// Noope way for targets to make modifications to the block object if/as needed
 export function transformBlock(block) {
     return block;
 }

package/dist/helpers/ab-tests.js

@@ -23,7 +23,8 @@ const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) &&
  */
 const getRandomVariationId = ({ id, variations }) => {
     let n = 0;
-    const random = Math.random(); // loop over variations test ratios, incrementing a counter,
+    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;
@@ -31,13 +32,15 @@ const getRandomVariationId = ({ id, variations }) => {
         if (random < n) {
             return id;
         }
-    } // the variations array does not include the default variation.
+    }
+    // the variations array 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 getAndSetVariantId = (args) => {
     // if variation not found in storage, assign a random variation to this user
-    const randomVariationId = getRandomVariationId(args); // store variation in cookies/storage
+    const randomVariationId = getRandomVariationId(args);
+    // store variation in cookies/storage
     setContentVariationCookie({
         contentId: args.id,
         value: randomVariationId
@@ -48,7 +51,8 @@ const getAndSetVariantId = (args) => {
 };
 const getTestFields = ({ item, testGroupId }) => {
     const variationValue = item.variations[testGroupId];
-    if (testGroupId === item.id || // handle edge-case where `testGroupId` points to non-existing variation
+    if (testGroupId === item.id ||
+        // handle edge-case where `testGroupId` points to non-existing variation
         !variationValue) {
         return {
             testVariationId: item.id,
@@ -88,7 +92,8 @@ export const handleABTestingSync = ({ item, canTrack }) => {
         item,
         testGroupId
     });
-    return { ...item,
+    return {
+        ...item,
         ...variationValue
     };
 };
@@ -110,7 +115,8 @@ export const handleABTesting = async ({ item, canTrack }) => {
         item,
         testGroupId
     });
-    return { ...item,
+    return {
+        ...item,
         ...variationValue
     };
 };

package/dist/helpers/cookie.js

@@ -27,7 +27,8 @@ const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}
 const SECURE_CONFIG = [['secure', ''], ['SameSite', 'None']];
 const createCookieString = ({ name, value, expires }) => {
     const secure = isBrowser() ? location.protocol === 'https:' : true;
-    const secureObj = secure ? SECURE_CONFIG : [[]]; // TODO: need to know if secure server side
+    const secureObj = secure ? SECURE_CONFIG : [[]];
+    // TODO: need to know if secure server side
     const expiresObj = expires ? [['expires', expires.toUTCString()]] : [[]];
     const cookieValue = [[name, value], ...expiresObj, ['path', '/'], ['domain', getTopLevelDomain(window.location.hostname)], ...secureObj];
     const cookie = stringifyCookie(cookieValue);

package/dist/helpers/flatten.js

@@ -8,9 +8,11 @@ export function flatten(object, path = null, separator = '.') {
         const value = object[key];
         const newPath = [path, key].filter(Boolean).join(separator);
         const isObject = [typeof value === 'object', value !== null, !(Array.isArray(value) && value.length === 0)].every(Boolean);
-        return isObject ? { ...acc,
+        return isObject ? {
+            ...acc,
             ...flatten(value, newPath, separator)
-        } : { ...acc,
+        } : {
+            ...acc,
             [newPath]: value
         };
     }, {});

package/dist/helpers/preview-lru-cache/init.d.ts

@@ -1 +1,6 @@
+/**
+ * This is an LRU cache to hold preview content on the server-side.
+ *
+ * Note: This logic is only used by the NextJS SDK.
+ */
 export declare function init(): void;

package/dist/helpers/preview-lru-cache/types.js

@@ -1 +1,6 @@
+/**
+ * This is an LRU cache to hold preview content on the server-side.
+ *
+ * Note: This logic is only used by the NextJS SDK.
+ */
 export {};

package/dist/index-helpers/blocks-exports.d.ts

@@ -1,10 +1,10 @@
-export { default as Button } from '../blocks/button/button.js';
-export { default as Columns } from '../blocks/columns/columns.js';
-export { default as Fragment } from '../blocks/fragment/fragment.js';
-export { default as Image } from '../blocks/image/image.js';
-export { default as RenderBlocks } from '../components/blocks/blocks.js';
-export { default as Section } from '../blocks/section/section.js';
-export { default as Symbol } from '../blocks/symbol/symbol.js';
-export { default as Text } from '../blocks/text/text.js';
-export { default as Video } from '../blocks/video/video.js';
-export { default as RenderContent } from '../components/content-variants/content-variants.js';
+export { default as Button } from '../blocks/button/button';
+export { default as Columns } from '../blocks/columns/columns';
+export { default as Fragment } from '../blocks/fragment/fragment';
+export { default as Image } from '../blocks/image/image';
+export { default as RenderBlocks } from '../components/blocks/blocks';
+export { default as Section } from '../blocks/section/section';
+export { default as Symbol } from '../blocks/symbol/symbol';
+export { default as Text } from '../blocks/text/text';
+export { default as Video } from '../blocks/video/video';
+export { default as RenderContent } from '../components/content-variants/content-variants';

package/dist/index-helpers/blocks-exports.js

@@ -1,10 +1,10 @@
-export { default as Button } from '../blocks/button/button.js';
-export { default as Columns } from '../blocks/columns/columns.js';
-export { default as Fragment } from '../blocks/fragment/fragment.js';
-export { default as Image } from '../blocks/image/image.js';
-export { default as RenderBlocks } from '../components/blocks/blocks.js';
-export { default as Section } from '../blocks/section/section.js';
-export { default as Symbol } from '../blocks/symbol/symbol.js';
-export { default as Text } from '../blocks/text/text.js';
-export { default as Video } from '../blocks/video/video.js';
-export { default as RenderContent } from '../components/content-variants/content-variants.js';
+export { default as Button } from '../blocks/button/button';
+export { default as Columns } from '../blocks/columns/columns';
+export { default as Fragment } from '../blocks/fragment/fragment';
+export { default as Image } from '../blocks/image/image';
+export { default as RenderBlocks } from '../components/blocks/blocks';
+export { default as Section } from '../blocks/section/section';
+export { default as Symbol } from '../blocks/symbol/symbol';
+export { default as Text } from '../blocks/text/text';
+export { default as Video } from '../blocks/video/video';
+export { default as RenderContent } from '../components/content-variants/content-variants';

package/dist/scripts/init-editing.js

@@ -59,7 +59,8 @@ export const setupBrowserForEditing = (options = {}) => {
                     {
                         const text = data.data.text;
                         const args = data.data.arguments || [];
-                        const id = data.data.id; // tslint:disable-next-line:no-function-constructor-with-string-args
+                        const id = data.data.id;
+                        // tslint:disable-next-line:no-function-constructor-with-string-args
                         const fn = new Function(text);
                         let result;
                         let error = null;

package/package.json

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