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

package/packages/react/src/functions/get-content/generate-content-url.ts

@@ -1,59 +0,0 @@
-import { flatten } from '../../helpers/flatten.js';
-import {
-  getBuilderSearchParamsFromWindow,
-  normalizeSearchParams,
-} from '../get-builder-search-params/index.js';
-import type { GetContentOptions } from './types.js';
-import { DEFAULT_API_VERSION } from '../../types/api-version';
-
-export const generateContentUrl = (options: GetContentOptions): URL => {
-  const {
-    limit = 30,
-    userAttributes,
-    query,
-    noTraverse = false,
-    model,
-    apiKey,
-    includeRefs = true,
-    locale,
-    apiVersion = DEFAULT_API_VERSION,
-  } = options;
-
-  if (!apiKey) {
-    throw new Error('Missing API key');
-  }
-
-  if (!['v2', 'v3'].includes(apiVersion)) {
-    throw new Error(
-      `Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`
-    );
-  }
-
-  const url = new URL(
-    `https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${
-      locale ? `&locale=${locale}` : ''
-    }`
-  );
-
-  const queryOptions = {
-    ...getBuilderSearchParamsFromWindow(),
-    ...normalizeSearchParams(options.options || {}),
-  };
-
-  const flattened = flatten(queryOptions);
-  for (const key in flattened) {
-    url.searchParams.set(key, String(flattened[key]));
-  }
-
-  if (userAttributes) {
-    url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
-  }
-  if (query) {
-    const flattened = flatten({ query });
-    for (const key in flattened) {
-      url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
-    }
-  }
-
-  return url;
-};

package/packages/react/src/functions/get-content/index.ts

@@ -1,62 +0,0 @@
-import { logger } from '../../helpers/logger.js';
-import type { BuilderContent } from '../../types/builder-content.js';
-import { fetch } from '../get-fetch.js';
-import { handleABTesting } from './ab-testing.js';
-import { generateContentUrl } from './generate-content-url.js';
-import type { GetContentOptions } from './types.js';
-
-export async function getContent(
-  options: GetContentOptions
-): Promise<BuilderContent | null> {
-  const allContent = await getAllContent({ ...options, limit: 1 });
-  if (allContent && 'results' in allContent) {
-    return allContent?.results[0] || null;
-  }
-
-  return null;
-}
-
-type ContentResponse =
-  | {
-      results: BuilderContent[];
-    }
-  | {
-      status: number;
-      message: string;
-    };
-
-export async function getAllContent(
-  options: GetContentOptions
-): Promise<ContentResponse | null> {
-  try {
-    const url = generateContentUrl(options);
-
-    const res = await fetch(url.href);
-    const content = await (res.json() as Promise<ContentResponse>);
-
-    if ('status' in content && !('results' in content)) {
-      logger.error('Error fetching data. ', { url, content, options });
-      return content;
-    }
-
-    const canTrack = options.canTrack !== false;
-    try {
-      if (
-        canTrack &&
-        // This makes sure we have a non-error response with the results array.
-        Array.isArray(content.results)
-      ) {
-        for (const item of content.results) {
-          await handleABTesting({ item, canTrack });
-        }
-      }
-    } catch (e) {
-      logger.error('Could not setup A/B testing. ', e);
-    }
-
-    return content;
-  } catch (error) {
-    logger.error('Error fetching data. ', error);
-    return null;
-  }
-}

package/packages/react/src/functions/get-content/types.ts

@@ -1,53 +0,0 @@
-export interface GetContentOptions {
-  /** The model to get content for */
-  model: string;
-
-  /** Your public API key */
-  apiKey: string;
-
-  /** Number of items to fetch. Default is 1 */
-  limit?: number;
-
-  /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
-  userAttributes?: (Record<string, string> & { urlPath?: string }) | null;
-
-  /** Custom query */
-  query?: Record<string, any>;
-
-  /**
-   * Any other API options.
-   * Accepts both a key/value object or a `URLSearchParams` instance
-   * */
-  options?: Record<string, any> | URLSearchParams;
-
-  /**
-   * If set to `true`, it will lazy load symbols/references.
-   * If set to `false`, it will render the entire content tree eagerly.
-   */
-  noTraverse?: boolean;
-
-  /**
-   * If set to `false`, it will not use cookies to target content. Therefore, A/B Testing will be disabled and
-   * only the default variation will be returned to every user.
-   *
-   * Defaults to `true`.
-   */
-  canTrack?: boolean;
-
-  /**
-   * Include references in the response. Defaults to `true`.
-   */
-  includeRefs?: boolean;
-
-  /**
-   * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
-   */
-  locale?: string;
-
-  /**
-   * If provided, sets the Builder API version used to fetch content.
-   *
-   * Defaults to `v3`.
-   */
-  apiVersion?: 'v2' | 'v3';
-}

package/packages/react/src/functions/get-fetch.ts

@@ -1,18 +0,0 @@
-import { getGlobalThis } from './get-global-this.js';
-
-function getFetch(): typeof global.fetch {
-  const globalFetch: typeof global.fetch = getGlobalThis().fetch;
-
-  if (typeof globalFetch === 'undefined') {
-    console.warn(
-      `Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
-      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`
-    );
-
-    throw new Error('Builder SDK could not find a global `fetch` function');
-  }
-
-  return globalFetch;
-}
-
-export const fetch = getFetch();

package/packages/react/src/functions/get-global-this.ts

@@ -1,17 +0,0 @@
-type Global = typeof global | typeof window | typeof self | typeof globalThis;
-
-export function getGlobalThis(): Global {
-  if (typeof globalThis !== 'undefined') {
-    return globalThis;
-  }
-  if (typeof window !== 'undefined') {
-    return window;
-  }
-  if (typeof global !== 'undefined') {
-    return global;
-  }
-  if (typeof self !== 'undefined') {
-    return self;
-  }
-  return globalThis;
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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