@builder.io/sdk-svelte 0.4.5 → 0.5.1

package/package/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/package/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/package/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/package/functions/extract-text-styles.js

@@ -1,23 +1,11 @@
-const TEXT_STYLE_KEYS = [
-    'color',
-    'whiteSpace',
-    'direction',
-    'hyphens',
-    'overflowWrap',
-];
+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'));
+    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.

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

@@ -1,10 +1,10 @@
-import { evaluate } from './evaluate.js';
-export const createEventHandler = (value, options) => (event) => evaluate({
+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,
+    isExpression: false
 });

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

@@ -5,5 +5,6 @@ type Actions = {
 };
 export declare function getBlockActions(options: {
     block: BuilderBlock;
+    stripPrefix?: boolean;
 } & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): Actions;
 export {};

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

@@ -1,3 +1,4 @@
+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) {
@@ -9,7 +10,19 @@ export function getBlockActions(options) {
             continue;
         }
         const value = optionActions[key];
-        obj[getEventHandlerName(key)] = createEventHandler(value, options);
+        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/package/functions/get-block-component-options.js

@@ -5,6 +5,6 @@ export function getBlockComponentOptions(block) {
         /**
          * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
          */
-        builderBlock: block,
+        builderBlock: block
     };
 }

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

@@ -1,5 +1,9 @@
+import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getBlockProperties(block: BuilderBlock): {
+export declare function getBlockProperties({ block, context }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}): {
     'builder-id': string | undefined;
     style: string | Partial<CSSStyleDeclaration> | undefined;
     class: string;

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

@@ -1,5 +1,6 @@
 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
@@ -29,18 +30,25 @@ const extractRelevantRootBlockProperties = (block) => {
     //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
     //   ...remainingBlockProperties
     // } = block;
-    return { href: block.href };
+    return {
+        href: block.href
+    };
 };
-export function getBlockProperties(block) {
+export function getBlockProperties({ block, context }) {
     const properties = {
         ...extractRelevantRootBlockProperties(block),
         ...block.properties,
         'builder-id': block.id,
-        style: getStyleAttribute(block.style),
-        class: [block.id, 'builder-block', block.class, block.properties?.class]
-            .filter(Boolean)
-            .join(' '),
+        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);
 }
 /**
@@ -49,9 +57,6 @@ export function getBlockProperties(block) {
  * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
  */
 function getStyleAttribute(style) {
-    if (!style) {
-        return undefined;
-    }
     switch (TARGET) {
         case 'svelte':
         case 'vue2':
@@ -61,6 +66,7 @@ function getStyleAttribute(style) {
         case 'qwik':
         case 'reactNative':
         case 'react':
+        case 'rsc':
             return style;
     }
 }

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

@@ -20,11 +20,9 @@ export const getBuilderSearchParams = (_options) => {
     }
     const options = normalizeSearchParams(_options);
     const newOptions = {};
-    Object.keys(options).forEach((key) => {
+    Object.keys(options).forEach(key => {
         if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-            const trimmedKey = key
-                .replace(BUILDER_SEARCHPARAMS_PREFIX, '')
-                .replace(BUILDER_OPTIONS_PREFIX, '');
+            const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
             newOptions[trimmedKey] = options[key];
         }
     });
@@ -37,6 +35,4 @@ export const getBuilderSearchParamsFromWindow = () => {
     const searchParams = new URLSearchParams(window.location.search);
     return getBuilderSearchParams(searchParams);
 };
-export const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams
-    ? convertSearchParamsToQueryObject(searchParams)
-    : searchParams;
+export const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;

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

@@ -1,8 +1,8 @@
 import { flatten } from '../../helpers/flatten.js';
-import { getBuilderSearchParamsFromWindow, normalizeSearchParams, } from '../get-builder-search-params/index.js';
-import { DEFAULT_API_VERSION } from '../../types/api-version';
+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;
+    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');
     }
@@ -12,7 +12,7 @@ export const generateContentUrl = (options) => {
     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 || {}),
+        ...normalizeSearchParams(options.options || {})
     };
     const flattened = flatten(queryOptions);
     for (const key in flattened) {
@@ -22,7 +22,9 @@ export const generateContentUrl = (options) => {
         url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
     }
     if (query) {
-        const flattened = flatten({ query });
+        const flattened = flatten({
+            query
+        });
         for (const key in flattened) {
             url.searchParams.set(key, JSON.stringify(flattened[key]));
         }

package/package/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) => Promise<ContentResults>;
-export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
+export declare const processContentResult: (options: GetContentOptions, content: ContentResults, url?: URL) => Promise<ContentResults>;
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResults | null>;
 export {};

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

@@ -2,13 +2,17 @@ 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;
 export async function getContent(options) {
-    const allContent = await getAllContent({ ...options, limit: 1 });
-    if (allContent && checkContentHasResults(allContent)) {
+    const allContent = await getAllContent({
+        ...options,
+        limit: 1
+    });
+    if (allContent) {
         return allContent.results[0] || null;
     }
     return null;
@@ -22,8 +26,17 @@ const fetchContent = async (options) => {
 /**
  * Exported only for testing purposes. Should not be used directly.
  */
-export const processContentResult = async (options, content) => {
+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'))
@@ -37,7 +50,10 @@ export const processContentResult = async (options, content) => {
     try {
         const newResults = [];
         for (const item of content.results) {
-            newResults.push(await handleABTesting({ item, canTrack }));
+            newResults.push(await handleABTesting({
+                item,
+                canTrack
+            }));
         }
         content.results = newResults;
     }
@@ -51,8 +67,12 @@ export async function getAllContent(options) {
         const url = generateContentUrl(options);
         const content = await fetchContent(options);
         if (!checkContentHasResults(content)) {
-            logger.error('Error fetching data. ', { url, content, options });
-            return content;
+            logger.error('Error fetching data. ', {
+                url,
+                content,
+                options
+            });
+            return null;
         }
         return processContentResult(options, content);
     }

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

@@ -1,6 +1,6 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState, }: {
+export declare function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }: {
     block: BuilderBlock;
     /**
      * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is

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

@@ -1,16 +1,20 @@
-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';
-const evaluateBindings = ({ block, context, localState, rootState, rootSetState, }) => {
+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 },
+        properties: {
+            ...copy.properties
+        },
+        actions: {
+            ...copy.actions
+        }
     };
     for (const binding in block.bindings) {
         const expression = block.bindings[binding];
@@ -19,13 +23,13 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState,
             localState,
             rootState,
             rootSetState,
-            context,
+            context
         });
         set(copied, binding, value);
     }
     return copied;
 };
-export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState, }) {
+export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
     const transformedBlock = transformBlock(block);
     if (shouldEvaluateBindings) {
         return evaluateBindings({
@@ -33,7 +37,7 @@ export function getProcessedBlock({ block, context, shouldEvaluateBindings, loca
             localState,
             rootState,
             rootSetState,
-            context,
+            context
         });
     }
     else {

package/package/functions/get-react-native-block-styles.d.ts

@@ -1,6 +1,6 @@
 import type { BuilderContextInterface } from '../context/types.js';
 import type { BuilderBlock } from '../types/builder-block.js';
-export declare function getReactNativeBlockStyles({ block, context, blockStyles, }: {
+export declare function getReactNativeBlockStyles({ block, context, blockStyles }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
     blockStyles: any;

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

@@ -1,5 +1,5 @@
 import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
-export function getReactNativeBlockStyles({ block, context, blockStyles, }) {
+export function getReactNativeBlockStyles({ block, context, blockStyles }) {
     const responsiveStyles = block.responsiveStyles;
     if (!responsiveStyles) {
         return {};
@@ -10,7 +10,7 @@ export function getReactNativeBlockStyles({ block, context, blockStyles, }) {
         ...(responsiveStyles.large || {}),
         ...(responsiveStyles.medium || {}),
         ...(responsiveStyles.small || {}),
-        ...blockStyles,
+        ...blockStyles
     };
     const newStyles = sanitizeReactNativeBlockStyles(styles);
     return newStyles;

package/package/functions/if-target.d.ts

@@ -1,5 +1,5 @@
 type Target = import('../types/targets').Target;
-export declare function ifTarget<A, B>({ targets, doThing, elseThing, }: {
+export declare function ifTarget<A, B>({ targets, doThing, elseThing }: {
     targets: Target[];
     doThing: () => A;
     elseThing?: () => B;

package/package/functions/if-target.js

@@ -1,6 +1,6 @@
 import { TARGET } from '../constants/target.js';
 // TODO: babel compile to include certain code only if the target matches
-export function ifTarget({ targets, doThing, elseThing, }) {
+export function ifTarget({ targets, doThing, elseThing }) {
     if (TARGET && targets.includes(TARGET)) {
         return doThing();
     }

package/package/functions/is-editing.js

@@ -1,7 +1,5 @@
 import { TARGET } from '../constants/target.js';
 import { isIframe } from './is-iframe.js';
 export function isEditing() {
-    return (isIframe() &&
-        (TARGET === 'reactNative' ||
-            window.location.search.indexOf('builder.frameEditing=') !== -1));
+    return isIframe() && (TARGET === 'reactNative' || window.location.search.indexOf('builder.frameEditing=') !== -1);
 }

package/package/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/package/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/package/functions/on-change.js

@@ -23,6 +23,6 @@ export function onChange(obj, cb) {
             const returnValue = Reflect.set(target, key, value);
             cb();
             return returnValue;
-        },
+        }
     });
 }

package/package/functions/register-component.d.ts

@@ -8,7 +8,8 @@ export declare const components: RegisteredComponent[];
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
  */
 export declare function registerComponent(component: any, info: ComponentInfo): void;
-export declare const createRegisterComponentMessage: ({ component: _, ...info }: RegisteredComponent) => {
+export declare const createRegisterComponentMessage: (info: ComponentInfo) => {
     type: string;
     data: ComponentInfo;
 };
+export declare const serializeComponentInfo: ({ inputs, ...info }: ComponentInfo) => ComponentInfo;

package/package/functions/register-component.js

@@ -1,4 +1,3 @@
-import { serializeFn } from '../blocks/util.js';
 import { fastClone } from './fast-clone.js';
 /**
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
@@ -8,19 +7,32 @@ export const components = [];
  * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
  */
 export function registerComponent(component, info) {
-    components.push({ component, ...info });
+    components.push({
+        component,
+        ...info
+    });
     console.warn('registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.');
     return component;
 }
-export const createRegisterComponentMessage = ({ component: _, ...info }) => ({
+export const createRegisterComponentMessage = (info) => ({
     type: 'builder.registerComponent',
-    data: prepareComponentInfoToSend(info),
+    data: info
 });
+// 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:
+    // 1. `function name(args) => {code}`
+    // 2. `name(args) => {code}`
+    // 3. `(args) => {}`
+    const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
+    return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
+};
 const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
+export const serializeComponentInfo = ({ inputs, ...info }) => ({
     ...fastClone(info),
-    inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
+    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
         ...acc,
-        [key]: serializeValue(value),
-    }), {})),
+        [key]: serializeValue(value)
+    }), {}))
 });

package/package/functions/register.js

@@ -11,8 +11,8 @@ export function register(type, info) {
             type: 'builder.register',
             data: {
                 type,
-                info,
-            },
+                info
+            }
         };
         try {
             parent.postMessage(message, '*');

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

@@ -22,8 +22,7 @@ export const sanitizeReactNativeBlockStyles = (styles) => {
             }
             return acc;
         }
-        if (propertiesThatMustBeNumber.has(key) &&
-            typeof propertyValue !== 'number') {
+        if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
             if (SHOW_WARNINGS) {
                 console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
             }
@@ -37,7 +36,10 @@ export const sanitizeReactNativeBlockStyles = (styles) => {
                 const newValue = parseFloat(propertyValue);
                 const normalizedValue = normalizeNumber(newValue);
                 if (normalizedValue) {
-                    return { ...acc, [key]: normalizedValue };
+                    return {
+                        ...acc,
+                        [key]: normalizedValue
+                    };
                 }
                 else {
                     return acc;
@@ -45,9 +47,15 @@ export const sanitizeReactNativeBlockStyles = (styles) => {
             }
             else if (propertyValue === '0') {
                 // 0 edge case needs to be handled
-                return { ...acc, [key]: 0 };
+                return {
+                    ...acc,
+                    [key]: 0
+                };
             }
         }
-        return { ...acc, [key]: propertyValue };
+        return {
+            ...acc,
+            [key]: propertyValue
+        };
     }, {});
 };

package/package/functions/set-editor-settings.js

@@ -5,7 +5,7 @@ export function setEditorSettings(newSettings) {
         Object.assign(settings, newSettings);
         const message = {
             type: 'builder.settingsChange',
-            data: settings,
+            data: settings
         };
         parent.postMessage(message, '*');
     }