@builder.io/sdk-react-native 1.0.32 → 1.0.34

package/src/functions/on-change.ts

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -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: 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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,33 @@
+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

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