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

package/packages/react/src/functions/get-processed-block.test.ts

@@ -0,0 +1,33 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+import { getProcessedBlock } from './get-processed-block.js';
+
+test('Can process bindings', () => {
+  const block: BuilderBlock = {
+    '@type': '@builder.io/sdk:Element',
+    properties: {
+      foo: 'bar',
+    },
+    bindings: {
+      'properties.foo': '"baz"',
+      'responsiveStyles.large.zIndex': '1 + 1',
+      'properties.test': 'state.test',
+      'properties.block': `
+        const foo = 'bar';
+        return foo;
+      `,
+      'properties.isEditing': 'builder.isEditing',
+    },
+  };
+  const processed = getProcessedBlock({
+    block,
+    context: {},
+    state: { test: 'hello' },
+    shouldEvaluateBindings: true,
+  });
+  expect(processed).not.toEqual(block);
+  expect(processed.properties?.foo).toEqual('baz');
+  expect(processed.properties?.test).toEqual('hello');
+  expect(processed.properties?.block).toEqual('bar');
+  expect(processed.properties?.isEditing).toEqual(false);
+  expect(processed.responsiveStyles?.large?.zIndex).toEqual(2);
+});

package/packages/react/src/functions/get-processed-block.ts

@@ -0,0 +1,54 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { evaluate } from './evaluate.js';
+import { fastClone } from './fast-clone.js';
+import { set } from './set.js';
+import { transformBlock } from './transform-block.js';
+
+const evaluateBindings = ({
+  block,
+  context,
+  state,
+}: {
+  block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock => {
+  if (!block.bindings) {
+    return block;
+  }
+  const copy = fastClone(block);
+  const copied = {
+    ...copy,
+    properties: { ...copy.properties },
+    actions: { ...copy.actions },
+  };
+
+  for (const binding in block.bindings) {
+    const expression = block.bindings[binding];
+    const value = evaluate({ code: expression, state, context });
+    set(copied, binding, value);
+  }
+
+  return copied;
+};
+
+export function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state,
+}: {
+  block: BuilderBlock;
+  /**
+   * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
+   * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
+   */
+  shouldEvaluateBindings: boolean;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): BuilderBlock {
+  const transformedBlock = transformBlock(block);
+
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
+  } else {
+    return transformedBlock;
+  }
+}

package/packages/react/src/functions/get-react-native-block-styles.ts

@@ -0,0 +1,33 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
+
+export function getReactNativeBlockStyles({
+  block,
+  context,
+  blockStyles,
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  blockStyles: any;
+}): CSSStyleDeclaration | Record<string, string | undefined> {
+  const responsiveStyles = block.responsiveStyles;
+  if (!responsiveStyles) {
+    return {};
+  }
+
+  const styles = {
+    // recursively apply inherited styles so that they can be passed down to children `Text` blocks
+    ...context.inheritedStyles,
+    ...(responsiveStyles.large || {}),
+    ...(responsiveStyles.medium || {}),
+    ...(responsiveStyles.small || {}),
+    ...blockStyles,
+  } as Record<string, string | number>;
+
+  const newStyles = sanitizeReactNativeBlockStyles(
+    styles
+  ) as any as CSSStyleDeclaration;
+
+  return newStyles;
+}

package/packages/react/src/functions/if-target.ts

@@ -0,0 +1,20 @@
+import { TARGET } from '../constants/target.js';
+
+type Target = import('../types/targets').Target;
+
+// TODO: babel compile to include certain code only if the target matches
+export function ifTarget<A, B>({
+  targets,
+  doThing,
+  elseThing,
+}: {
+  targets: Target[];
+  doThing: () => A;
+  elseThing?: () => B;
+}) {
+  if (TARGET && targets.includes(TARGET)) {
+    return doThing();
+  } else {
+    return elseThing?.();
+  }
+}

package/packages/react/src/functions/is-browser.ts

@@ -0,0 +1,3 @@
+export function isBrowser(): boolean {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+}

package/packages/react/src/functions/is-editing.ts

@@ -0,0 +1,10 @@
+import { TARGET } from '../constants/target.js';
+import { isIframe } from './is-iframe.js';
+
+export function isEditing(): boolean {
+  return (
+    isIframe() &&
+    (TARGET === 'reactNative' ||
+      window.location.search.indexOf('builder.frameEditing=') !== -1)
+  );
+}

package/packages/react/src/functions/is-iframe.ts

@@ -0,0 +1,5 @@
+import { isBrowser } from './is-browser.js';
+
+export function isIframe(): boolean {
+  return isBrowser() && window.self !== window.top;
+}

package/packages/react/src/functions/is-previewing.ts

@@ -0,0 +1,14 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+
+export function isPreviewing() {
+  if (!isBrowser()) {
+    return false;
+  }
+
+  if (isEditing()) {
+    return false;
+  }
+
+  return Boolean(location.search.indexOf('builder.preview=') !== -1);
+}

package/packages/react/src/functions/on-change.test.ts

@@ -0,0 +1,23 @@
+import { onChange } from './on-change.js';
+
+test('onChange can observe a shallow change', () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: 'hi' }, () => (changeHappend = true));
+  obj.foo = 'yo';
+  expect(changeHappend).toBe(true);
+});
+
+test('onChange can observe a deep change', () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+  obj.foo.bar = 'yo';
+  expect(changeHappend).toBe(true);
+});
+
+test('Smoke test: callback is not fired if no properties updated', () => {
+  let changeHappend = false;
+  const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+  // Access some properties
+  obj.foo.bar;
+  expect(changeHappend).toBe(false);
+});

package/packages/react/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/packages/react/src/functions/register-component.ts

@@ -0,0 +1,50 @@
+import { serializeFn } from '../blocks/util.js';
+import type { RegisteredComponent } from '../context/types.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Input } from '../types/input.js';
+import { fastClone } from './fast-clone.js';
+
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export const components: RegisteredComponent[] = [];
+
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export function registerComponent(component: any, info: ComponentInfo): void {
+  components.push({ component, ...info });
+
+  console.warn(
+    'registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.'
+  );
+
+  return component;
+}
+
+export const createRegisterComponentMessage = ({
+  component: _,
+  ...info
+}: RegisteredComponent) => ({
+  type: 'builder.registerComponent',
+  data: prepareComponentInfoToSend(info),
+});
+
+const serializeValue = (value: object): any =>
+  typeof value === 'function' ? serializeFn(value) : fastClone(value);
+
+const prepareComponentInfoToSend = ({
+  inputs,
+  ...info
+}: ComponentInfo): ComponentInfo => ({
+  ...fastClone(info),
+  inputs: inputs?.map((input) =>
+    Object.entries(input).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        [key]: serializeValue(value),
+      }),
+      {} as Input
+    )
+  ),
+});

package/packages/react/src/functions/register.ts

@@ -0,0 +1,46 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+import type { DeepPartial } from '../types/deep-partial.js';
+import { isBrowser } from './is-browser.js';
+
+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/packages/react/src/functions/sanitize-react-native-block-styles.ts

@@ -0,0 +1,65 @@
+const propertiesThatMustBeNumber = new Set(['lineHeight']);
+const displayValues = new Set(['flex', 'none']);
+
+const SHOW_WARNINGS = false;
+
+type Styles = Record<string, string | number>;
+
+const normalizeNumber = (value: number): number | undefined => {
+  if (Number.isNaN(value)) {
+    return undefined;
+  } else if (value < 0) {
+    // TODO: why are negative values not allowed?
+    return 0;
+  } else {
+    return value;
+  }
+};
+
+export const sanitizeReactNativeBlockStyles = (styles: Styles): Styles => {
+  return Object.keys(styles).reduce<Styles>((acc, key): Styles => {
+    const propertyValue = styles[key];
+
+    if (key === 'display' && !displayValues.has(propertyValue as string)) {
+      if (SHOW_WARNINGS) {
+        console.warn(
+          `Style value for key "display" must be "flex" or "none" but had ${propertyValue}`
+        );
+      }
+      return acc;
+    }
+
+    if (
+      propertiesThatMustBeNumber.has(key) &&
+      typeof propertyValue !== 'number'
+    ) {
+      if (SHOW_WARNINGS) {
+        console.warn(
+          `Style key ${key} must be a number, but had value \`${styles[key]}\``
+        );
+      }
+      return acc;
+    }
+
+    if (typeof propertyValue === 'string') {
+      // `px` units need to be stripped and replaced with numbers
+      // https://regexr.com/6ualn
+      const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+
+      if (isPixelUnit) {
+        const newValue = parseFloat(propertyValue);
+        const normalizedValue = normalizeNumber(newValue);
+        if (normalizedValue) {
+          return { ...acc, [key]: normalizedValue };
+        } else {
+          return acc;
+        }
+      } else if (propertyValue === '0') {
+        // 0 edge case needs to be handled
+        return { ...acc, [key]: 0 };
+      }
+    }
+
+    return { ...acc, [key]: propertyValue };
+  }, {});
+};

package/packages/react/src/functions/set-editor-settings.ts

@@ -0,0 +1,16 @@
+import { isBrowser } from './is-browser.js';
+
+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/packages/react/src/functions/set.test.ts

@@ -0,0 +1,19 @@
+import { set } from './set.js';
+
+test('can shallow set a property', () => {
+  const obj = { foo: 'bar' };
+  set(obj, 'foo', 'baz');
+  expect(obj.foo).toBe('baz');
+});
+
+test('can deeply set a property', () => {
+  const obj = { foo: 'bar' };
+  set(obj, 'foo.bar', 'baz');
+  expect((obj.foo as any).bar).toBe('baz');
+});
+
+test('can deeply create arrays', () => {
+  const obj = { foo: 'bar' };
+  set(obj, 'foo.bar.0', 'hi');
+  expect((obj.foo as any).bar).toEqual(['hi']);
+});

package/packages/react/src/functions/set.ts

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

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

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