@builder.io/sdk-react 0.2.3-3 → 0.2.3-4

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

@@ -0,0 +1,30 @@
+import { evaluate } from './evaluate.js';
+import { fastClone } from './fast-clone.js';
+import { set } from './set.js';
+import { transformBlock } from './transform-block.js';
+const evaluateBindings = ({ block, context, state, }) => {
+    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, state, context });
+        set(copied, binding, value);
+    }
+    return copied;
+};
+export function getProcessedBlock({ block, context, shouldEvaluateBindings, state, }) {
+    const transformedBlock = transformBlock(block);
+    if (shouldEvaluateBindings) {
+        return evaluateBindings({ block: transformedBlock, state, context });
+    }
+    else {
+        return transformedBlock;
+    }
+}

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

@@ -0,0 +1,31 @@
+import { getProcessedBlock } from './get-processed-block.js';
+test('Can process bindings', () => {
+    const block = {
+        '@type': '@builder.io/sdk:Element',
+        properties: {
+            foo: 'bar',
+        },
+        bindings: {
+            'properties.foo': '"baz"',
+            'responsiveStyles.large.zIndex': '1 + 1',
+            'properties.test': 'state.test',
+            'properties.block': `
+        const foo = 'bar';
+        return foo;
+      `,
+            'properties.isEditing': 'builder.isEditing',
+        },
+    };
+    const processed = getProcessedBlock({
+        block,
+        context: {},
+        state: { test: 'hello' },
+        shouldEvaluateBindings: true,
+    });
+    expect(processed).not.toEqual(block);
+    expect(processed.properties?.foo).toEqual('baz');
+    expect(processed.properties?.test).toEqual('hello');
+    expect(processed.properties?.block).toEqual('bar');
+    expect(processed.properties?.isEditing).toEqual(false);
+    expect(processed.responsiveStyles?.large?.zIndex).toEqual(2);
+});

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

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function getReactNativeBlockStyles({ block, context, blockStyles, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    blockStyles: any;
+}): CSSStyleDeclaration | Record<string, string | undefined>;

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

@@ -0,0 +1,17 @@
+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/sdk/functions/if-target.d.ts

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

package/dist/sdk/functions/if-target.js

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

package/dist/sdk/functions/is-browser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/dist/sdk/functions/is-browser.js

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

package/dist/sdk/functions/is-editing.d.ts

@@ -0,0 +1 @@
+export declare function isEditing(): boolean;

package/dist/sdk/functions/is-editing.js

@@ -0,0 +1,7 @@
+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/sdk/functions/is-iframe.d.ts

@@ -0,0 +1 @@
+export declare function isIframe(): boolean;

package/dist/sdk/functions/is-iframe.js

@@ -0,0 +1,4 @@
+import { isBrowser } from './is-browser.js';
+export function isIframe() {
+    return isBrowser() && window.self !== window.top;
+}

package/dist/sdk/functions/is-previewing.d.ts

@@ -0,0 +1 @@
+export declare function isPreviewing(): boolean;

package/dist/sdk/functions/is-previewing.js

@@ -0,0 +1,11 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+export function isPreviewing() {
+    if (!isBrowser()) {
+        return false;
+    }
+    if (isEditing()) {
+        return false;
+    }
+    return Boolean(location.search.indexOf('builder.preview=') !== -1);
+}

package/dist/sdk/functions/on-change.d.ts

@@ -0,0 +1,7 @@
+export declare const onChangeProxySymbol: unique symbol;
+/**
+ * Deeply observe an object and run a callback when it changes
+ *
+ * See ./on-change.test.ts for more info
+ */
+export declare function onChange<T extends object = any>(obj: T, cb: () => void): T;

package/dist/sdk/functions/on-change.js

@@ -0,0 +1,28 @@
+export const onChangeProxySymbol = Symbol('onChangeProxySymbol');
+/**
+ * Deeply observe an object and run a callback when it changes
+ *
+ * See ./on-change.test.ts for more info
+ */
+export function onChange(obj, cb) {
+    return new Proxy(obj, {
+        get(target, key) {
+            if (key === onChangeProxySymbol) {
+                return true;
+            }
+            const value = Reflect.get(target, key);
+            if (value && typeof value === 'object') {
+                if (value[onChangeProxySymbol]) {
+                    return value;
+                }
+                return onChange(value, cb);
+            }
+            return value;
+        },
+        set(target, key, value) {
+            const returnValue = Reflect.set(target, key, value);
+            cb();
+            return returnValue;
+        },
+    });
+}

package/dist/sdk/functions/on-change.test.js

@@ -0,0 +1,20 @@
+import { onChange } from './on-change.js';
+test('onChange can observe a shallow change', () => {
+    let changeHappend = false;
+    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));
+    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));
+    // Access some properties
+    obj.foo.bar;
+    expect(changeHappend).toBe(false);
+});

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

@@ -0,0 +1,14 @@
+import type { RegisteredComponent } from '../context/types.js';
+import type { ComponentInfo } from '../types/components.js';
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+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) => {
+    type: string;
+    data: ComponentInfo;
+};

package/dist/sdk/functions/register-component.js

@@ -0,0 +1,26 @@
+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.
+ */
+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 = ({ component: _, ...info }) => ({
+    type: 'builder.registerComponent',
+    data: prepareComponentInfoToSend(info),
+});
+const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
+const prepareComponentInfoToSend = ({ inputs, ...info }) => ({
+    ...fastClone(info),
+    inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: serializeValue(value),
+    }), {})),
+});

package/dist/sdk/functions/register.d.ts

@@ -0,0 +1,16 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+import type { DeepPartial } from '../types/deep-partial.js';
+export interface InsertMenuItem {
+    name: string;
+    icon?: string;
+    item: DeepPartial<BuilderBlock>;
+}
+export interface InsertMenuConfig {
+    name: string;
+    priority?: number;
+    persist?: boolean;
+    advanced?: boolean;
+    items: InsertMenuItem[];
+}
+export declare function register(type: 'insertMenu', info: InsertMenuConfig): void;
+export declare function register(type: string, info: any): void;

package/dist/sdk/functions/register.js

@@ -0,0 +1,27 @@
+import { isBrowser } from './is-browser.js';
+const registry = {};
+export function register(type, info) {
+    let typeList = registry[type];
+    if (!typeList) {
+        typeList = registry[type] = [];
+    }
+    typeList.push(info);
+    if (isBrowser()) {
+        const message = {
+            type: 'builder.register',
+            data: {
+                type,
+                info,
+            },
+        };
+        try {
+            parent.postMessage(message, '*');
+            if (parent !== window) {
+                window.postMessage(message, '*');
+            }
+        }
+        catch (err) {
+            console.debug('Could not postmessage', err);
+        }
+    }
+}

package/dist/sdk/functions/sanitize-react-native-block-styles.d.ts

@@ -0,0 +1,3 @@
+type Styles = Record<string, string | number>;
+export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
+export {};

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

@@ -0,0 +1,53 @@
+const propertiesThatMustBeNumber = new Set(['lineHeight']);
+const displayValues = new Set(['flex', 'none']);
+const SHOW_WARNINGS = false;
+const normalizeNumber = (value) => {
+    if (Number.isNaN(value)) {
+        return undefined;
+    }
+    else if (value < 0) {
+        // TODO: why are negative values not allowed?
+        return 0;
+    }
+    else {
+        return value;
+    }
+};
+export const sanitizeReactNativeBlockStyles = (styles) => {
+    return Object.keys(styles).reduce((acc, key) => {
+        const propertyValue = styles[key];
+        if (key === 'display' && !displayValues.has(propertyValue)) {
+            if (SHOW_WARNINGS) {
+                console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
+            }
+            return acc;
+        }
+        if (propertiesThatMustBeNumber.has(key) &&
+            typeof propertyValue !== 'number') {
+            if (SHOW_WARNINGS) {
+                console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+            }
+            return acc;
+        }
+        if (typeof propertyValue === 'string') {
+            // `px` units need to be stripped and replaced with numbers
+            // https://regexr.com/6ualn
+            const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+            if (isPixelUnit) {
+                const newValue = parseFloat(propertyValue);
+                const normalizedValue = normalizeNumber(newValue);
+                if (normalizedValue) {
+                    return { ...acc, [key]: normalizedValue };
+                }
+                else {
+                    return acc;
+                }
+            }
+            else if (propertyValue === '0') {
+                // 0 edge case needs to be handled
+                return { ...acc, [key]: 0 };
+            }
+        }
+        return { ...acc, [key]: propertyValue };
+    }, {});
+};

package/dist/sdk/functions/set-editor-settings.d.ts

@@ -0,0 +1,4 @@
+export type Settings = {
+    customInsertMenu?: boolean;
+};
+export declare function setEditorSettings(newSettings: Settings): void;

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

@@ -0,0 +1,12 @@
+import { isBrowser } from './is-browser.js';
+const settings = {};
+export function setEditorSettings(newSettings) {
+    if (isBrowser()) {
+        Object.assign(settings, newSettings);
+        const message = {
+            type: 'builder.settingsChange',
+            data: settings,
+        };
+        parent.postMessage(message, '*');
+    }
+}

package/dist/sdk/functions/set.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export declare const set: (obj: any, _path: string | string[], value: any) => any;

package/dist/sdk/functions/set.js

@@ -0,0 +1,21 @@
+/**
+ * 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/set.test.js

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

package/dist/sdk/functions/track/helpers.d.ts

@@ -0,0 +1,5 @@
+export declare const getUserAttributes: () => {
+    urlPath: string;
+    host: string;
+    device: string;
+};

package/dist/sdk/functions/track/helpers.js

@@ -0,0 +1,56 @@
+import { TARGET } from '../../constants/target';
+import { isBrowser } from '../is-browser';
+const getLocation = () => {
+    if (TARGET === 'reactNative') {
+        return null;
+    }
+    else if (isBrowser()) {
+        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 = '/';
+        }
+        return parsedLocation;
+    }
+    else {
+        console.warn('Cannot get location for tracking in non-browser environment');
+        return null;
+    }
+};
+const getUserAgent = () => (typeof navigator === 'object' && navigator.userAgent) || '';
+export const getUserAttributes = () => {
+    const userAgent = getUserAgent();
+    const isMobile = {
+        Android() {
+            return userAgent.match(/Android/i);
+        },
+        BlackBerry() {
+            return userAgent.match(/BlackBerry/i);
+        },
+        iOS() {
+            return userAgent.match(/iPhone|iPod/i);
+        },
+        Opera() {
+            return userAgent.match(/Opera Mini/i);
+        },
+        Windows() {
+            return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+        },
+        any() {
+            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',
+    };
+};

package/dist/sdk/functions/track/index.d.ts

@@ -0,0 +1,51 @@
+import type { CanTrack } from '../../types/can-track.js';
+import type { Dictionary } from '../../types/typescript.js';
+interface Event {
+    /**
+     * The type of your event.
+     *
+     * Examples: `click`, `conversion`, `pageview`, `impression`
+     */
+    type: string;
+    data: {
+        /**
+         * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
+         */
+        contentId?: string;
+        /**
+         * This is the ID of the space that the content belongs to.
+         */
+        ownerId: string;
+        /**
+         * (Optional) metadata that you want to provide with your event.
+         */
+        metadata?: Dictionary<any>;
+        /**
+         * Session ID of the user. This is provided by the SDK by checking session storage.
+         */
+        sessionId: string | undefined;
+        /**
+         * Visitor ID of the user. This is provided by the SDK by checking cookies.
+         */
+        visitorId: string | undefined;
+        /**
+         * (Optional) If running an A/B test, the ID of the variation that the user is in.
+         */
+        variationId?: string;
+        [index: string]: any;
+    };
+}
+type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
+    /**
+     * Your organization's API key.
+     */
+    apiKey: Event['data']['ownerId'];
+    /**
+     * (Optional) Any additional (non-metadata) properties to add to the event.
+     */
+    [index: string]: any;
+};
+export type EventProps = EventProperties & CanTrack;
+export declare function _track(eventProps: EventProps): Promise<void | Response>;
+export declare const track: (args: EventProperties) => Promise<void | Response>;
+export {};

package/dist/sdk/functions/track/index.js

@@ -0,0 +1,59 @@
+import { TARGET } from '../../constants/target.js';
+import { logger } from '../../helpers/logger.js';
+import { getSessionId } from '../../helpers/sessionId.js';
+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, }) => {
+    if (!canTrack) {
+        return { visitorId: undefined, sessionId: undefined };
+    }
+    const sessionId = await getSessionId({ canTrack });
+    const visitorId = getVisitorId({ canTrack });
+    return {
+        sessionId,
+        visitorId,
+    };
+};
+const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
+    type: eventType,
+    data: {
+        ...properties,
+        metadata: {
+            url: location.href,
+            ...metadata,
+        },
+        ...(await getTrackingEventData({ canTrack })),
+        userAttributes: getUserAttributes(),
+        ownerId: apiKey,
+    },
+});
+export async function _track(eventProps) {
+    if (!eventProps.apiKey) {
+        logger.error('Missing API key for track call. Please provide your API key.');
+        return;
+    }
+    if (!eventProps.canTrack) {
+        return;
+    }
+    if (isEditing()) {
+        return;
+    }
+    if (!(isBrowser() || TARGET === 'reactNative')) {
+        return;
+    }
+    return fetch(`https://builder.io/api/v1/track`, {
+        method: 'POST',
+        body: JSON.stringify({
+            events: [await createEvent(eventProps)],
+        }),
+        headers: {
+            'content-type': 'application/json',
+        },
+        mode: 'cors',
+    }).catch((err) => {
+        console.error('Failed to track: ', err);
+    });
+}
+export const track = (args) => _track({ ...args, canTrack: true });

package/dist/sdk/functions/track/interaction.d.ts

@@ -0,0 +1,13 @@
+type Offset = {
+    x: number;
+    y: number;
+};
+export declare const getInteractionPropertiesForEvent: (event: MouseEvent) => {
+    targetBuilderElement: string;
+    metadata: {
+        targetOffset: Offset;
+        builderTargetOffset: Offset;
+        builderElementIndex: any;
+    };
+};
+export {};