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

package/packages/react/src/functions/track/helpers.ts

@@ -1,67 +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/packages/react/src/functions/track/index.ts

@@ -1,136 +0,0 @@
-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 type { CanTrack } from '../../types/can-track.js';
-import type { Dictionary } from '../../types/typescript.js';
-import { isBrowser } from '../is-browser.js';
-import { isEditing } from '../is-editing.js';
-import { getUserAttributes } from './helpers.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 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://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/packages/react/src/functions/track/interaction.ts

@@ -1,80 +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/packages/react/src/functions/transform-block-properties.ts

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

package/packages/react/src/functions/transform-block.ts

@@ -1,6 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-
-// Noope way for targets to make modifications to the block object if/as needed
-export function transformBlock(block: BuilderBlock): BuilderBlock {
-  return block;
-}

package/packages/react/src/helpers/ab-tests.ts

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

package/packages/react/src/helpers/cookie.ts

@@ -1,107 +0,0 @@
-import { isBrowser } from '../functions/is-browser.js';
-import type { CanTrack } from '../types/can-track.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,
-}: {
-  name: string;
-} & CanTrack): Promise<string | undefined> => {
-  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;
-  }
-};
-
-type CookieConfiguration = Array<
-  | ['expires', string]
-  | ['path', '/']
-  | ['domain', string]
-  | ['secure', '']
-  | ['SameSite', 'None']
-  | [string, string]
-  | []
->;
-
-const stringifyCookie = (cookie: CookieConfiguration): string =>
-  cookie
-    .map(([key, value]) => (value ? `${key}=${value}` : key))
-    .filter(checkIsDefined)
-    .join('; ');
-
-const SECURE_CONFIG: CookieConfiguration = [
-  ['secure', ''],
-  ['SameSite', 'None'],
-];
-
-const createCookieString = ({
-  name,
-  value,
-  expires,
-}: {
-  name: string;
-  value: string;
-  expires?: Date;
-}) => {
-  const secure = isBrowser() ? location.protocol === 'https:' : true;
-
-  const secureObj: CookieConfiguration = secure ? SECURE_CONFIG : [[]];
-
-  // TODO: need to know if secure server side
-  const expiresObj: CookieConfiguration = expires
-    ? [['expires', expires.toUTCString()]]
-    : [[]];
-
-  const cookieValue: CookieConfiguration = [
-    [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,
-}: {
-  name: string;
-  value: string;
-  expires?: Date;
-} & CanTrack): Promise<void> => {
-  try {
-    if (!canTrack) {
-      return;
-    }
-    const cookie = createCookieString({ name, value, expires });
-    document.cookie = cookie;
-  } catch (err) {
-    console.warn('[COOKIE] SET error: ', err);
-  }
-};

package/packages/react/src/helpers/css.ts

@@ -1,42 +0,0 @@
-import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
-import { checkIsDefined } from './nullable.js';
-
-export const convertStyleMapToCSSArray = (
-  style: Partial<CSSStyleDeclaration>
-): string[] => {
-  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: Partial<CSSStyleDeclaration>
-): string => convertStyleMapToCSSArray(style).join('\n');
-
-export const createCssClass = ({
-  mediaQuery,
-  className,
-  styles,
-}: {
-  mediaQuery?: string;
-  className: string;
-  styles: Partial<CSSStyleDeclaration>;
-}) => {
-  const cssClass = `.${className} {
-    ${convertStyleMapToCSS(styles)}
-  }`;
-
-  if (mediaQuery) {
-    return `${mediaQuery} {
-      ${cssClass}
-    }`;
-  } else {
-    return cssClass;
-  }
-};

package/packages/react/src/helpers/flatten.ts

@@ -1,24 +0,0 @@
-/**
- * Convert deep object to a flat object with dots
- *
- * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
- */
-export function flatten<T extends Record<string, any>>(
-  object: T,
-  path: string | null = null,
-  separator = '.'
-): T {
-  return Object.keys(object).reduce((acc: T, key: string): T => {
-    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 };
-  }, {} as T);
-}

package/packages/react/src/helpers/localStorage.ts

@@ -1,40 +0,0 @@
-import { isBrowser } from '../functions/is-browser.js';
-import type { CanTrack } from '../types/can-track.js';
-import type { Nullable } from './nullable.js';
-
-const getLocalStorage = () =>
-  isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
-
-export const getLocalStorageItem = ({
-  key,
-  canTrack,
-}: {
-  key: string;
-} & CanTrack): Nullable<string> => {
-  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,
-}: {
-  key: string;
-  value: string;
-} & CanTrack) => {
-  try {
-    if (canTrack) {
-      getLocalStorage()?.setItem(key, value);
-    }
-  } catch (err) {
-    console.debug('[LocalStorage] SET error: ', err);
-  }
-};

package/packages/react/src/helpers/logger.ts

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

package/packages/react/src/helpers/nullable.ts

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

package/packages/react/src/helpers/sessionId.ts

@@ -1,38 +0,0 @@
-import type { CanTrack } from '../types/can-track.js';
-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,
-}: CanTrack): Promise<string | undefined> => {
-  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,
-}: {
-  id: string;
-} & CanTrack) =>
-  setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });

package/packages/react/src/helpers/time.ts

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

package/packages/react/src/helpers/url.test.ts

@@ -1,23 +0,0 @@
-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/packages/react/src/helpers/url.ts

@@ -1,16 +0,0 @@
-/**
- * Only gets one level up from hostname
- * wwww.example.com -> example.com
- * www.example.co.uk -> example.co.uk
- */
-export const getTopLevelDomain = (host: string) => {
-  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/packages/react/src/helpers/uuid.ts

@@ -1,17 +0,0 @@
-/**
- * @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/packages/react/src/helpers/visitorId.ts

@@ -1,40 +0,0 @@
-import type { CanTrack } from '../types/can-track.js';
-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 }: CanTrack): string | undefined => {
-  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,
-}: {
-  id: string;
-} & CanTrack) =>
-  setLocalStorageItem({
-    key: VISITOR_LOCAL_STORAGE_KEY,
-    value: id,
-    canTrack,
-  });