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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+/**
+ * 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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+/**
+ * @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

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

package/packages/react/src/index-helpers/blocks-exports.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/packages/react/src/index-helpers/top-of-file.ts

@@ -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/packages/react/src/index.ts

@@ -0,0 +1,14 @@
+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';

package/packages/react/src/scripts/init-editing.ts

@@ -0,0 +1,123 @@
+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: {
+    includeRefs?: boolean;
+    locale?: string;
+  } = {}
+) => {
+  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: any;
+          let error: Error | null = null;
+          try {
+            // eslint-disable-next-line prefer-spread
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err as Error;
+          }
+
+          if (error) {
+            window.parent?.postMessage(
+              {
+                type: 'builder.evaluateError',
+                data: { id, error: error.message },
+              },
+              '*'
+            );
+          } else {
+            if (result && typeof result.then === 'function') {
+              (result as Promise<any>)
+                .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/packages/react/src/types/api-version.ts

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