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

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

@@ -0,0 +1,54 @@
+function round(num) {
+    return Math.round(num * 1000) / 1000;
+}
+const findParentElement = (target, callback, checkElement = true) => {
+    if (!(target instanceof HTMLElement)) {
+        return null;
+    }
+    let parent = checkElement ? target : target.parentElement;
+    do {
+        if (!parent) {
+            return null;
+        }
+        const matches = callback(parent);
+        if (matches) {
+            return parent;
+        }
+    } while ((parent = parent.parentElement));
+    return null;
+};
+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 targetRect = target.getBoundingClientRect();
+    const xOffset = event.clientX - targetRect.left;
+    const yOffset = event.clientY - targetRect.top;
+    const xRatio = round(xOffset / targetRect.width);
+    const yRatio = round(yOffset / targetRect.height);
+    return {
+        x: xRatio,
+        y: yRatio,
+    };
+};
+export const getInteractionPropertiesForEvent = (event) => {
+    const target = event.target;
+    const targetBuilderElement = target && findBuilderParent(target);
+    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,
+        },
+    };
+};

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

@@ -0,0 +1 @@
+export declare function transformBlockProperties<T>(properties: T): T;

package/dist/sdk/functions/transform-block-properties.js

@@ -0,0 +1,3 @@
+export function transformBlockProperties(properties) {
+    return properties;
+}

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

@@ -0,0 +1,2 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function transformBlock(block: BuilderBlock): BuilderBlock;

package/dist/sdk/functions/transform-block.js

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

package/dist/sdk/helpers/ab-tests.d.ts

@@ -0,0 +1,8 @@
+import type { CanTrack } from '../types/can-track.js';
+export declare const getContentVariationCookie: ({ contentId, canTrack, }: {
+    contentId: string;
+} & CanTrack) => Promise<string>;
+export declare const setContentVariationCookie: ({ contentId, canTrack, value, }: {
+    contentId: string;
+    value: string;
+} & CanTrack) => Promise<void>;

package/dist/sdk/helpers/ab-tests.js

@@ -0,0 +1,5 @@
+import { getCookie, setCookie } from './cookie.js';
+const BUILDER_STORE_PREFIX = 'builderio.variations';
+const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
+export const getContentVariationCookie = ({ contentId, canTrack, }) => getCookie({ name: getContentTestKey(contentId), canTrack });
+export const setContentVariationCookie = ({ contentId, canTrack, value, }) => setCookie({ name: getContentTestKey(contentId), value, canTrack });

package/dist/sdk/helpers/cookie.d.ts

@@ -0,0 +1,15 @@
+import type { CanTrack } from '../types/can-track.js';
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export declare const getCookie: ({ name, canTrack, }: {
+    name: string;
+} & CanTrack) => Promise<string | undefined>;
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export declare const setCookie: ({ name, value, expires, canTrack, }: {
+    name: string;
+    value: string;
+    expires?: Date;
+} & CanTrack) => Promise<void>;

package/dist/sdk/helpers/cookie.js

@@ -0,0 +1,65 @@
+import { isBrowser } from '../functions/is-browser.js';
+import { checkIsDefined } from './nullable.js';
+import { getTopLevelDomain } from './url.js';
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export const getCookie = async ({ name, canTrack, }) => {
+    try {
+        if (!canTrack) {
+            return undefined;
+        }
+        /**
+         * Extracted from MDN docs
+         * https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_2_get_a_sample_cookie_named_test2
+         */
+        return document.cookie
+            .split('; ')
+            .find((row) => row.startsWith(`${name}=`))
+            ?.split('=')[1];
+    }
+    catch (err) {
+        console.debug('[COOKIE] GET error: ', err);
+        return undefined;
+    }
+};
+const stringifyCookie = (cookie) => cookie
+    .map(([key, value]) => (value ? `${key}=${value}` : key))
+    .filter(checkIsDefined)
+    .join('; ');
+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 expiresObj = expires
+        ? [['expires', expires.toUTCString()]]
+        : [[]];
+    const cookieValue = [
+        [name, value],
+        ...expiresObj,
+        ['path', '/'],
+        ['domain', getTopLevelDomain(window.location.hostname)],
+        ...secureObj,
+    ];
+    const cookie = stringifyCookie(cookieValue);
+    return cookie;
+};
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export const setCookie = async ({ name, value, expires, canTrack, }) => {
+    try {
+        if (!canTrack) {
+            return;
+        }
+        const cookie = createCookieString({ name, value, expires });
+        document.cookie = cookie;
+    }
+    catch (err) {
+        console.warn('[COOKIE] SET error: ', err);
+    }
+};

package/dist/sdk/helpers/css.d.ts

@@ -0,0 +1,7 @@
+export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
+export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
+export declare const createCssClass: ({ mediaQuery, className, styles, }: {
+    mediaQuery?: string;
+    className: string;
+    styles: Partial<CSSStyleDeclaration>;
+}) => string;

package/dist/sdk/helpers/css.js

@@ -0,0 +1,27 @@
+import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
+import { checkIsDefined } from './nullable.js';
+export const convertStyleMapToCSSArray = (style) => {
+    const cssProps = Object.entries(style).map(([key, value]) => {
+        if (typeof value === 'string') {
+            return `${camelToKebabCase(key)}: ${value};`;
+        }
+        else {
+            return undefined;
+        }
+    });
+    return cssProps.filter(checkIsDefined);
+};
+export const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join('\n');
+export const createCssClass = ({ mediaQuery, className, styles, }) => {
+    const cssClass = `.${className} {
+    ${convertStyleMapToCSS(styles)}
+  }`;
+    if (mediaQuery) {
+        return `${mediaQuery} {
+      ${cssClass}
+    }`;
+    }
+    else {
+        return cssClass;
+    }
+};

package/dist/sdk/helpers/flatten.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert deep object to a flat object with dots
+ *
+ * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
+ */
+export declare function flatten<T extends Record<string, any>>(object: T, path?: string | null, separator?: string): T;

package/dist/sdk/helpers/flatten.js

@@ -0,0 +1,19 @@
+/**
+ * Convert deep object to a flat object with dots
+ *
+ * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
+ */
+export function flatten(object, path = null, separator = '.') {
+    return Object.keys(object).reduce((acc, key) => {
+        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, ...flatten(value, newPath, separator) }
+            : { ...acc, [newPath]: value };
+    }, {});
+}

package/dist/sdk/helpers/localStorage.d.ts

@@ -0,0 +1,9 @@
+import type { CanTrack } from '../types/can-track.js';
+import type { Nullable } from './nullable.js';
+export declare const getLocalStorageItem: ({ key, canTrack, }: {
+    key: string;
+} & CanTrack) => Nullable<string>;
+export declare const setLocalStorageItem: ({ key, canTrack, value, }: {
+    key: string;
+    value: string;
+} & CanTrack) => void;

package/dist/sdk/helpers/localStorage.js

@@ -0,0 +1,24 @@
+import { isBrowser } from '../functions/is-browser.js';
+const getLocalStorage = () => isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
+export const getLocalStorageItem = ({ key, canTrack, }) => {
+    try {
+        if (canTrack) {
+            return getLocalStorage()?.getItem(key);
+        }
+        return undefined;
+    }
+    catch (err) {
+        console.debug('[LocalStorage] GET error: ', err);
+        return undefined;
+    }
+};
+export const setLocalStorageItem = ({ key, canTrack, value, }) => {
+    try {
+        if (canTrack) {
+            getLocalStorage()?.setItem(key, value);
+        }
+    }
+    catch (err) {
+        console.debug('[LocalStorage] SET error: ', err);
+    }
+};

package/dist/sdk/helpers/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const logger: {
+    log: (...message: any[]) => void;
+    error: (...message: any[]) => void;
+    warn: (...message: any[]) => void;
+};

package/dist/sdk/helpers/logger.js

@@ -0,0 +1,6 @@
+const MSG_PREFIX = '[Builder.io]: ';
+export const logger = {
+    log: (...message) => console.log(MSG_PREFIX, ...message),
+    error: (...message) => console.error(MSG_PREFIX, ...message),
+    warn: (...message) => console.warn(MSG_PREFIX, ...message),
+};

package/dist/sdk/helpers/nullable.d.ts

@@ -0,0 +1,2 @@
+export type Nullable<T> = T | null | undefined;
+export declare const checkIsDefined: <T>(maybeT: T) => maybeT is T;

package/dist/sdk/helpers/nullable.js

@@ -0,0 +1 @@
+export const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== undefined;

package/dist/sdk/helpers/sessionId.d.ts

@@ -0,0 +1,6 @@
+import type { CanTrack } from '../types/can-track.js';
+export declare const getSessionId: ({ canTrack, }: CanTrack) => Promise<string | undefined>;
+export declare const createSessionId: () => string;
+export declare const setSessionId: ({ id, canTrack, }: {
+    id: string;
+} & CanTrack) => Promise<void>;

package/dist/sdk/helpers/sessionId.js

@@ -0,0 +1,23 @@
+import { getCookie, setCookie } from './cookie.js';
+import { checkIsDefined } from './nullable.js';
+import { uuid } from './uuid.js';
+const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
+export const getSessionId = async ({ canTrack, }) => {
+    if (!canTrack) {
+        return undefined;
+    }
+    const sessionId = await getCookie({
+        name: SESSION_LOCAL_STORAGE_KEY,
+        canTrack,
+    });
+    if (checkIsDefined(sessionId)) {
+        return sessionId;
+    }
+    else {
+        const newSessionId = createSessionId();
+        setSessionId({ id: newSessionId, canTrack });
+        return newSessionId;
+    }
+};
+export const createSessionId = () => uuid();
+export const setSessionId = ({ id, canTrack, }) => setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });

package/dist/sdk/helpers/time.d.ts

@@ -0,0 +1 @@
+export declare const getCurrentDatePlusMinutes: (minutes?: number) => Date;

package/dist/sdk/helpers/time.js

@@ -0,0 +1,2 @@
+const MINUTE_TO_MILLESECONDS_MULTIPLIER = 60000;
+export const getCurrentDatePlusMinutes = (minutes = 30) => new Date(Date.now() + minutes * MINUTE_TO_MILLESECONDS_MULTIPLIER);

package/dist/sdk/helpers/url.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Only gets one level up from hostname
+ * wwww.example.com -> example.com
+ * www.example.co.uk -> example.co.uk
+ */
+export declare const getTopLevelDomain: (host: string) => string;

package/dist/sdk/helpers/url.js

@@ -0,0 +1,15 @@
+/**
+ * Only gets one level up from hostname
+ * wwww.example.com -> example.com
+ * www.example.co.uk -> example.co.uk
+ */
+export const getTopLevelDomain = (host) => {
+    if (host === 'localhost' || host === '127.0.0.1') {
+        return host;
+    }
+    const parts = host.split('.');
+    if (parts.length > 2) {
+        return parts.slice(1).join('.');
+    }
+    return host;
+};

package/dist/sdk/helpers/url.test.js

@@ -0,0 +1,21 @@
+import { getTopLevelDomain } from './url.js';
+describe('getTopLevelDomain', () => {
+    test('handles root domain', () => {
+        const output = getTopLevelDomain('example.com');
+        expect(output).toBe('example.com');
+    });
+    test('handles subdomain', () => {
+        const output = getTopLevelDomain('wwww.example.com');
+        expect(output).toBe('example.com');
+    });
+    test('handles subdomain with long suffix', () => {
+        const output = getTopLevelDomain('www.example.co.uk');
+        expect(output).toBe('example.co.uk');
+    });
+    test('handles localhost', () => {
+        const output = getTopLevelDomain('localhost');
+        expect(output).toBe('localhost');
+        const output2 = getTopLevelDomain('127.0.0.1');
+        expect(output2).toBe('127.0.0.1');
+    });
+});

package/dist/sdk/helpers/uuid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @credit https://stackoverflow.com/a/2117523
+ */
+export declare function uuidv4(): string;
+/**
+ * Slightly cleaner and smaller UUIDs
+ */
+export declare function uuid(): string;

package/dist/sdk/helpers/uuid.js

@@ -0,0 +1,15 @@
+/**
+ * @credit https://stackoverflow.com/a/2117523
+ */
+export function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+/**
+ * Slightly cleaner and smaller UUIDs
+ */
+export function uuid() {
+    return uuidv4().replace(/-/g, '');
+}

package/dist/sdk/helpers/visitorId.d.ts

@@ -0,0 +1,6 @@
+import type { CanTrack } from '../types/can-track.js';
+export declare const getVisitorId: ({ canTrack }: CanTrack) => string | undefined;
+export declare const createVisitorId: () => string;
+export declare const setVisitorId: ({ id, canTrack, }: {
+    id: string;
+} & CanTrack) => void;

package/dist/sdk/helpers/visitorId.js

@@ -0,0 +1,27 @@
+import { getLocalStorageItem, setLocalStorageItem } from './localStorage.js';
+import { checkIsDefined } from './nullable.js';
+import { uuid } from './uuid.js';
+const VISITOR_LOCAL_STORAGE_KEY = 'builderVisitorId';
+export const getVisitorId = ({ canTrack }) => {
+    if (!canTrack) {
+        return undefined;
+    }
+    const visitorId = getLocalStorageItem({
+        key: VISITOR_LOCAL_STORAGE_KEY,
+        canTrack,
+    });
+    if (checkIsDefined(visitorId)) {
+        return visitorId;
+    }
+    else {
+        const newVisitorId = createVisitorId();
+        setVisitorId({ id: newVisitorId, canTrack });
+        return newVisitorId;
+    }
+};
+export const createVisitorId = () => uuid();
+export const setVisitorId = ({ id, canTrack, }) => setLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    value: id,
+    canTrack,
+});

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

@@ -0,0 +1,10 @@
+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/render-blocks';
+export { default as RenderContent } from '../components/render-content/render-content';
+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';

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

@@ -0,0 +1,10 @@
+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/render-blocks';
+export { default as RenderContent } from '../components/render-content/render-content';
+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';

package/dist/sdk/index-helpers/top-of-file.d.ts

@@ -0,0 +1 @@
+export default undefined;

package/dist/sdk/index-helpers/top-of-file.js

@@ -0,0 +1,4 @@
+// no-op
+// this file exists in case a target needs to add logic to the top of the index file in an
+// override.
+export default undefined;

package/dist/sdk/index.d.ts

@@ -0,0 +1,13 @@
+export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/blocks-exports.js';
+export * from './functions/is-editing.js';
+export * from './functions/is-previewing.js';
+export * from './functions/register-component.js';
+export * from './functions/register.js';
+export * from './functions/set-editor-settings.js';
+export * from './functions/get-content/index.js';
+export * from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track/index.js';
+export type { RegisteredComponent } from './context/types';
+export type { ComponentInfo } from './types/components';
+export type { RenderContentProps } from './components/render-content/render-content.types.js';

package/dist/sdk/index.js

@@ -0,0 +1,10 @@
+export * from './index-helpers/top-of-file.js';
+export * from './index-helpers/blocks-exports.js';
+export * from './functions/is-editing.js';
+export * from './functions/is-previewing.js';
+export * from './functions/register-component.js';
+export * from './functions/register.js';
+export * from './functions/set-editor-settings.js';
+export * from './functions/get-content/index.js';
+export * from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track/index.js';

package/dist/sdk/scripts/init-editing.d.ts

@@ -0,0 +1,5 @@
+export declare const registerInsertMenu: () => void;
+export declare const setupBrowserForEditing: (options?: {
+    includeRefs?: boolean;
+    locale?: string;
+}) => void;

package/dist/sdk/scripts/init-editing.js

@@ -0,0 +1,100 @@
+import { TARGET } from '../constants/target.js';
+import { isBrowser } from '../functions/is-browser.js';
+import { register } from '../functions/register.js';
+export const registerInsertMenu = () => {
+    register('insertMenu', {
+        name: '_default',
+        default: true,
+        items: [
+            { name: 'Box' },
+            { name: 'Text' },
+            { name: 'Image' },
+            { name: 'Columns' },
+            ...(TARGET === 'reactNative'
+                ? []
+                : [
+                    { name: 'Core:Section' },
+                    { name: 'Core:Button' },
+                    { name: 'Embed' },
+                    { name: 'Custom Code' },
+                ]),
+        ],
+    });
+};
+let isSetupForEditing = false;
+export const setupBrowserForEditing = (options = {}) => {
+    if (isSetupForEditing) {
+        return;
+    }
+    isSetupForEditing = true;
+    if (isBrowser()) {
+        window.parent?.postMessage({
+            type: 'builder.sdkInfo',
+            data: {
+                target: TARGET,
+                // TODO: compile these in
+                // type: process.env.SDK_TYPE,
+                // version: process.env.SDK_VERSION,
+                supportsPatchUpdates: false,
+                // Supports builder-model="..." attribute which is needed to
+                // scope our '+ add block' button styling
+                supportsAddBlockScoping: true,
+                supportsCustomBreakpoints: true,
+            },
+        }, '*');
+        window.parent?.postMessage({
+            type: 'builder.updateContent',
+            data: {
+                options,
+            },
+        }, '*');
+        window.addEventListener('message', ({ data }) => {
+            if (!data?.type) {
+                return;
+            }
+            switch (data.type) {
+                case 'builder.evaluate': {
+                    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 fn = new Function(text);
+                    let result;
+                    let error = null;
+                    try {
+                        // eslint-disable-next-line prefer-spread
+                        result = fn.apply(null, args);
+                    }
+                    catch (err) {
+                        error = err;
+                    }
+                    if (error) {
+                        window.parent?.postMessage({
+                            type: 'builder.evaluateError',
+                            data: { id, error: error.message },
+                        }, '*');
+                    }
+                    else {
+                        if (result && typeof result.then === 'function') {
+                            result
+                                .then((finalResult) => {
+                                window.parent?.postMessage({
+                                    type: 'builder.evaluateResult',
+                                    data: { id, result: finalResult },
+                                }, '*');
+                            })
+                                .catch(console.error);
+                        }
+                        else {
+                            window.parent?.postMessage({
+                                type: 'builder.evaluateResult',
+                                data: { result, id },
+                            }, '*');
+                        }
+                    }
+                    break;
+                }
+            }
+        });
+    }
+};

package/dist/sdk/types/api-version.d.ts

@@ -0,0 +1,2 @@
+export type ApiVersion = 'v2' | 'v3';
+export declare const DEFAULT_API_VERSION: ApiVersion;

package/dist/sdk/types/api-version.js

@@ -0,0 +1 @@
+export const DEFAULT_API_VERSION = 'v3';