@builder.io/sdk-react-native 1.0.31-0 → 1.0.31

package/src/functions/on-change.ts

@@ -1,29 +0,0 @@
-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<T extends object = any>(obj: T, cb: () => void): T {
-  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 as any)[onChangeProxySymbol]) {
-          return value;
-        }
-        return onChange(value, cb);
-      }
-      return value;
-    },
-    set(target, key, value) {
-      const returnValue = Reflect.set(target, key, value);
-      cb();
-      return returnValue;
-    }
-  });
-}

package/src/functions/register-component.ts

@@ -1,30 +0,0 @@
-import type { ComponentInfo } from '../types/components';
-import type { Input } from '../types/input';
-import { fastClone } from './fast-clone';
-export const createRegisterComponentMessage = (info: ComponentInfo) => ({
-  type: 'builder.registerComponent',
-  data: serializeComponentInfo(info)
-});
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-const serializeFn = (fnValue: Function) => {
-  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: object): any => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-export const serializeComponentInfo = ({
-  inputs,
-  ...info
-}: ComponentInfo): ComponentInfo => ({
-  ...fastClone(info),
-  inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), ({} as Input)))
-})

package/src/functions/register.ts

@@ -1,44 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block';
-import type { DeepPartial } from '../types/deep-partial';
-import { isBrowser } from './is-browser';
-export interface InsertMenuItem {
-  name: string;
-  icon?: string;
-  item: DeepPartial<BuilderBlock>;
-}
-export interface InsertMenuConfig {
-  name: string;
-  priority?: number;
-  persist?: boolean;
-  advanced?: boolean;
-  items: InsertMenuItem[];
-}
-const registry: {
-  [key: string]: any[];
-} = {};
-export function register(type: 'insertMenu', info: InsertMenuConfig): void;
-export function register(type: string, info: any): void;
-export function register(type: string, info: any) {
-  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/src/functions/set-editor-settings.ts

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

package/src/functions/set.ts

@@ -1,14 +0,0 @@
-/**
- * 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: any, _path: string | string[], value: any) => {
-  if (Object(obj) !== obj) {
-    return obj;
-  }
-  const path: string[] = Array.isArray(_path) ? _path : (_path.toString().match(/[^.[\]]+/g) as string[]);
-  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/src/functions/track/helpers.ts

@@ -1,51 +0,0 @@
-import { TARGET } from '../../constants/target';
-import type { Nullable } from '../../helpers/nullable';
-import { isBrowser } from '../is-browser';
-const getLocation = (): Nullable<URL> => {
-  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/src/functions/track/index.ts

@@ -1,131 +0,0 @@
-import { TARGET } from '../../constants/target';
-import { logger } from '../../helpers/logger';
-import { getSessionId } from '../../helpers/sessionId';
-import { getVisitorId } from '../../helpers/visitorId';
-import type { CanTrack } from '../../types/can-track';
-import type { Dictionary } from '../../types/typescript';
-import { isBrowser } from '../is-browser';
-import { isEditing } from '../is-editing';
-import { getUserAttributes } from './helpers';
-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 TrackingData = {
-  visitorId: string | undefined;
-  sessionId: string | undefined;
-};
-const getTrackingEventData = async ({
-  canTrack
-}: CanTrack): Promise<TrackingData> => {
-  if (!canTrack) {
-    return {
-      visitorId: undefined,
-      sessionId: undefined
-    };
-  }
-  const sessionId = await getSessionId({
-    canTrack
-  });
-  const visitorId = getVisitorId({
-    canTrack
-  });
-  return {
-    sessionId,
-    visitorId
-  };
-};
-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;
-const createEvent = async ({
-  type: eventType,
-  canTrack,
-  apiKey,
-  metadata,
-  ...properties
-}: EventProps): Promise<Event> => ({
-  type: eventType,
-  data: {
-    ...properties,
-    metadata: {
-      url: location.href,
-      ...metadata
-    },
-    ...(await getTrackingEventData({
-      canTrack
-    })),
-    userAttributes: getUserAttributes(),
-    ownerId: apiKey
-  }
-});
-export async function _track(eventProps: 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://cdn.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: EventProperties) => _track({
-  ...args,
-  canTrack: true
-})

package/src/functions/track/interaction.ts

@@ -1,63 +0,0 @@
-function round(num: number) {
-  return Math.round(num * 1000) / 1000;
-}
-const findParentElement = (target: HTMLElement, callback: (element: HTMLElement) => boolean, checkElement = true): HTMLElement | null => {
-  if (!(target instanceof HTMLElement)) {
-    return null;
-  }
-  let parent: HTMLElement | null = 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: HTMLElement) => findParentElement(target, el => {
-  const id = el.getAttribute('builder-id') || el.id;
-  return Boolean(id?.indexOf('builder-') === 0);
-});
-type Offset = {
-  x: number;
-  y: number;
-};
-const computeOffset = ({
-  event,
-  target
-}: {
-  event: MouseEvent;
-  target: HTMLElement;
-}): Offset => {
-  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: MouseEvent) => {
-  const target = (event.target as HTMLElement | null);
-  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 ? ([] as Element[]).slice.call(document.getElementsByClassName(builderId)).indexOf(targetBuilderElement) : undefined
-    }
-  };
-}

package/src/functions/transform-block-properties.ts

@@ -1,33 +0,0 @@
-import { findDOMNode } from 'react-dom';
-import type { BuilderContextInterface } from '../context/types';
-import type { BuilderBlock } from '../types/builder-block';
-import { isEditing } from './is-editing';
-
-export function transformBlockProperties({
-  properties,
-}: {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-  properties: any;
-}) {
-  if (!isEditing()) {
-    return properties;
-  }
-
-  const id = properties['builder-id'];
-
-  if (!id) {
-    console.warn('No builder-id found on properties', properties);
-  }
-
-  properties.ref = (ref) => {
-    if (isEditing()) {
-      const el = findDOMNode(ref);
-      if (el && !(el instanceof Text)) {
-        el.setAttribute('builder-id', id);
-        el.classList.add(id);
-      }
-    }
-  };
-  return properties;
-}

package/src/functions/transform-block.ts

@@ -1,30 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block';
-
-export function transformBlock(block: BuilderBlock): BuilderBlock {
-  // Map the DOM-based pixel format to a native compatible one.
-  // react-native doesn't support DOM specific fields like `tagName` and `properties`, but any browser framework (e.g. Vue, etc.) do
-  // Additionally, we only want to convert the DOM pixel format (looks like `{ tagName: 'img', properties: { src: '...' } }`)
-  // but we may move to a DOM-less pixel format that uses `{ component: { name: 'Image', ... } }` so if a `component` property is provided
-  // we assume this accounts for native as well and we should not transform this block
-  if (block.id.startsWith('builder-pixel-') && !block.component) {
-    return {
-      ...block,
-      // drop the `tagName` field so it never ends up rendered.
-      tagName: undefined,
-      component: {
-        name: 'Image',
-        options: {
-          image: block.properties.src,
-          width: 1,
-          height: 1,
-        },
-      },
-      properties: {
-        ...block.properties,
-        width: 1 as any,
-        height: 1 as any,
-      },
-    };
-  }
-  return block;
-}