@builder.io/sdk-react 0.4.4 → 0.5.0

package/dist/{sdk/functions → 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/dist/{sdk/functions → functions}/get-processed-block.test.js

@@ -3,26 +3,28 @@ test('Can process bindings', () => {
     const block = {
         '@type': '@builder.io/sdk:Element',
         properties: {
-            foo: 'bar',
+            foo: 'bar'
         },
         bindings: {
             'properties.foo': '"baz"',
             'responsiveStyles.large.zIndex': '1 + 1',
             'properties.test': 'state.test',
             'properties.block': `
-        const foo = 'bar';
+        var foo = 'bar';
         return foo;
       `,
-            'properties.isEditing': 'builder.isEditing',
-        },
+            'properties.isEditing': 'builder.isEditing'
+        }
     };
     const processed = getProcessedBlock({
         block,
         context: {},
-        rootState: { test: 'hello' },
+        rootState: {
+            test: 'hello'
+        },
         rootSetState: undefined,
         localState: undefined,
-        shouldEvaluateBindings: true,
+        shouldEvaluateBindings: true
     });
     expect(processed).not.toEqual(block);
     expect(processed.properties?.foo).toEqual('baz');

package/dist/{sdk/functions → 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/dist/{sdk/functions → 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/dist/{sdk/functions → 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/dist/{sdk/functions → 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/dist/functions/is-editing.js

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

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/{sdk/functions → functions}/on-change.js

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

package/dist/{sdk/functions → functions}/on-change.test.js

@@ -1,19 +1,29 @@
 import { onChange } from './on-change.js';
 test('onChange can observe a shallow change', () => {
     let changeHappend = false;
-    const obj = onChange({ foo: 'hi' }, () => (changeHappend = true));
+    const obj = onChange({
+        foo: 'hi'
+    }, () => changeHappend = true);
     obj.foo = 'yo';
     expect(changeHappend).toBe(true);
 });
 test('onChange can observe a deep change', () => {
     let changeHappend = false;
-    const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+    const obj = onChange({
+        foo: {
+            bar: 'hi'
+        }
+    }, () => changeHappend = true);
     obj.foo.bar = 'yo';
     expect(changeHappend).toBe(true);
 });
 test('Smoke test: callback is not fired if no properties updated', () => {
     let changeHappend = false;
-    const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+    const obj = onChange({
+        foo: {
+            bar: 'hi'
+        }
+    }, () => changeHappend = true);
     // Access some properties
     obj.foo.bar;
     expect(changeHappend).toBe(false);

package/dist/{sdk/functions → 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/dist/functions/register-component.js

@@ -0,0 +1,38 @@
+import { fastClone } from './fast-clone.js';
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+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
+    });
+    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 = (info) => ({
+    type: 'builder.registerComponent',
+    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);
+export const serializeComponentInfo = ({ inputs, ...info }) => ({
+    ...fastClone(info),
+    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: serializeValue(value)
+    }), {}))
+});

package/dist/{sdk/functions → functions}/register.js

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

package/dist/{sdk/functions → 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/dist/{sdk/functions → 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, '*');
     }

package/dist/functions/set.js

@@ -0,0 +1,14 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export const set = (obj, _path, value) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
+    path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+    return obj;
+};

package/dist/{sdk/functions → functions}/set.test.js

@@ -1,16 +1,22 @@
 import { set } from './set.js';
 test('can shallow set a property', () => {
-    const obj = { foo: 'bar' };
+    const obj = {
+        foo: 'bar'
+    };
     set(obj, 'foo', 'baz');
     expect(obj.foo).toBe('baz');
 });
 test('can deeply set a property', () => {
-    const obj = { foo: 'bar' };
+    const obj = {
+        foo: 'bar'
+    };
     set(obj, 'foo.bar', 'baz');
     expect(obj.foo.bar).toBe('baz');
 });
 test('can deeply create arrays', () => {
-    const obj = { foo: 'bar' };
+    const obj = {
+        foo: 'bar'
+    };
     set(obj, 'foo.bar.0', 'hi');
     expect(obj.foo.bar).toEqual(['hi']);
 });

package/dist/{sdk/functions → functions}/track/helpers.js

@@ -1,5 +1,5 @@
-import { TARGET } from '../../constants/target';
-import { isBrowser } from '../is-browser';
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../is-browser.js';
 const getLocation = () => {
     if (TARGET === 'reactNative') {
         return null;
@@ -18,7 +18,7 @@ const getLocation = () => {
         return null;
     }
 };
-const getUserAgent = () => (typeof navigator === 'object' && navigator.userAgent) || '';
+const getUserAgent = () => typeof navigator === 'object' && navigator.userAgent || '';
 export const getUserAttributes = () => {
     const userAgent = getUserAgent();
     const isMobile = {
@@ -38,19 +38,14 @@ export const getUserAttributes = () => {
             return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
         },
         any() {
-            return (isMobile.Android() ||
-                isMobile.BlackBerry() ||
-                isMobile.iOS() ||
-                isMobile.Opera() ||
-                isMobile.Windows() ||
-                TARGET === 'reactNative');
-        },
+            return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === 'reactNative';
+        }
     };
     const isTablet = userAgent.match(/Tablet|iPad/i);
     const url = getLocation();
     return {
         urlPath: url?.pathname,
         host: url?.host || url?.hostname,
-        device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop',
+        device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop'
     };
 };

package/dist/{sdk/functions → functions}/track/index.js

@@ -5,15 +5,22 @@ import { getVisitorId } from '../../helpers/visitorId.js';
 import { isBrowser } from '../is-browser.js';
 import { isEditing } from '../is-editing.js';
 import { getUserAttributes } from './helpers.js';
-const getTrackingEventData = async ({ canTrack, }) => {
+const getTrackingEventData = async ({ canTrack }) => {
     if (!canTrack) {
-        return { visitorId: undefined, sessionId: undefined };
+        return {
+            visitorId: undefined,
+            sessionId: undefined
+        };
     }
-    const sessionId = await getSessionId({ canTrack });
-    const visitorId = getVisitorId({ canTrack });
+    const sessionId = await getSessionId({
+        canTrack
+    });
+    const visitorId = getVisitorId({
+        canTrack
+    });
     return {
         sessionId,
-        visitorId,
+        visitorId
     };
 };
 const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
@@ -22,12 +29,14 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
         ...properties,
         metadata: {
             url: location.href,
-            ...metadata,
+            ...metadata
         },
-        ...(await getTrackingEventData({ canTrack })),
+        ...(await getTrackingEventData({
+            canTrack
+        })),
         userAttributes: getUserAttributes(),
-        ownerId: apiKey,
-    },
+        ownerId: apiKey
+    }
 });
 export async function _track(eventProps) {
     if (!eventProps.apiKey) {
@@ -46,14 +55,17 @@ export async function _track(eventProps) {
     return fetch(`https://cdn.builder.io/api/v1/track`, {
         method: 'POST',
         body: JSON.stringify({
-            events: [await createEvent(eventProps)],
+            events: [await createEvent(eventProps)]
         }),
         headers: {
-            'content-type': 'application/json',
+            'content-type': 'application/json'
         },
-        mode: 'cors',
-    }).catch((err) => {
+        mode: 'cors'
+    }).catch(err => {
         console.error('Failed to track: ', err);
     });
 }
-export const track = (args) => _track({ ...args, canTrack: true });
+export const track = (args) => _track({
+    ...args,
+    canTrack: true
+});

package/dist/{sdk/functions → functions}/track/interaction.js

@@ -14,14 +14,14 @@ const findParentElement = (target, callback, checkElement = true) => {
         if (matches) {
             return parent;
         }
-    } while ((parent = parent.parentElement));
+    } while (parent = parent.parentElement);
     return null;
 };
-const findBuilderParent = (target) => findParentElement(target, (el) => {
+const findBuilderParent = (target) => findParentElement(target, el => {
     const id = el.getAttribute('builder-id') || el.id;
     return Boolean(id?.indexOf('builder-') === 0);
 });
-const computeOffset = ({ event, target, }) => {
+const computeOffset = ({ event, target }) => {
     const targetRect = target.getBoundingClientRect();
     const xOffset = event.clientX - targetRect.left;
     const yOffset = event.clientY - targetRect.top;
@@ -29,26 +29,25 @@ const computeOffset = ({ event, target, }) => {
     const yRatio = round(yOffset / targetRect.height);
     return {
         x: xRatio,
-        y: yRatio,
+        y: yRatio
     };
 };
 export const getInteractionPropertiesForEvent = (event) => {
     const target = event.target;
     const targetBuilderElement = target && findBuilderParent(target);
-    const builderId = targetBuilderElement?.getAttribute('builder-id') ||
-        targetBuilderElement?.id;
+    const builderId = targetBuilderElement?.getAttribute('builder-id') || targetBuilderElement?.id;
     return {
         targetBuilderElement: builderId || undefined,
         metadata: {
-            targetOffset: target ? computeOffset({ event, target }) : undefined,
-            builderTargetOffset: targetBuilderElement
-                ? computeOffset({ event, target: targetBuilderElement })
-                : undefined,
-            builderElementIndex: targetBuilderElement && builderId
-                ? [].slice
-                    .call(document.getElementsByClassName(builderId))
-                    .indexOf(targetBuilderElement)
-                : undefined,
-        },
+            targetOffset: target ? computeOffset({
+                event,
+                target
+            }) : undefined,
+            builderTargetOffset: targetBuilderElement ? computeOffset({
+                event,
+                target: targetBuilderElement
+            }) : undefined,
+            builderElementIndex: targetBuilderElement && builderId ? [].slice.call(document.getElementsByClassName(builderId)).indexOf(targetBuilderElement) : undefined
+        }
     };
 };

package/dist/functions/transform-block-properties.d.ts

@@ -0,0 +1 @@
+export declare function transformBlockProperties(properties: any): any;

package/dist/{sdk/functions → functions}/transform-block-properties.js

@@ -1,3 +1,5 @@
 export function transformBlockProperties(properties) {
+    properties.className = properties.class;
+    delete properties.class;
     return properties;
 }

package/dist/{sdk/helpers → helpers}/ab-tests.d.ts

@@ -1,9 +1,9 @@
 import type { CanTrack } from '../types/can-track.js';
 import type { BuilderContent } from '../types/builder-content.js';
 import type { Nullable } from '../types/typescript.js';
-export declare const handleABTestingSync: ({ item, canTrack, }: {
+export declare const handleABTestingSync: ({ item, canTrack }: {
     item: Nullable<BuilderContent>;
 } & CanTrack) => Nullable<BuilderContent>;
-export declare const handleABTesting: ({ item, canTrack, }: {
+export declare const handleABTesting: ({ item, canTrack }: {
     item: BuilderContent;
 } & CanTrack) => Promise<BuilderContent>;