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

package/src/helpers/preview-lru-cache/get.ts

@@ -0,0 +1,4 @@
+import type { BuilderContent } from '../../types/builder-content';
+export function getPreviewContent(_searchParams: URLSearchParams): BuilderContent | undefined {
+  return undefined;
+}

package/src/helpers/preview-lru-cache/helpers.ts

@@ -0,0 +1 @@
+export {}

package/src/helpers/preview-lru-cache/init.ts

@@ -0,0 +1,7 @@
+/**
+ * This is an LRU cache to hold preview content on the server-side.
+ *
+ * Note: This logic is only used by the NextJS SDK.
+ */
+
+export function init() {}

package/src/helpers/preview-lru-cache/set.ts

@@ -0,0 +1,12 @@
+import type { BuilderContent } from '../../types/builder-content';
+export async function postPreviewContent({
+  key,
+  value
+}: {
+  key: string;
+  value: BuilderContent;
+}) {
+  return {
+    [key]: value
+  };
+}

package/src/helpers/preview-lru-cache/types.ts

@@ -0,0 +1 @@
+export {}

package/src/helpers/search/search.ts

@@ -0,0 +1,18 @@
+export type QueryObject = Record<string, string | string[]>;
+export const convertSearchParamsToQueryObject = (searchParams: URLSearchParams): QueryObject => {
+  const options: Record<string, string> = {};
+  searchParams.forEach((value, key) => {
+    options[key] = value;
+  });
+  return options;
+};
+export const normalizeSearchParams = (searchParams: QueryObject | URLSearchParams): QueryObject => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
+export type Search = URLSearchParams | string | QueryObject;
+export const getSearchString = (search: Search): string => {
+  if (typeof search === 'string') {
+    return search;
+  } else if (search instanceof URLSearchParams) {
+    return search.toString();
+  }
+  return new URLSearchParams((search as any)).toString();
+}

package/src/helpers/sessionId.ts

@@ -0,0 +1,37 @@
+import type { CanTrack } from '../types/can-track';
+import { getCookie, setCookie } from './cookie';
+import { checkIsDefined } from './nullable';
+import { uuid } from './uuid';
+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/src/helpers/subscribe-to-editor.ts

@@ -0,0 +1,95 @@
+import type { ContentProps } from '../components/content/content.types';
+import { isBrowser } from '../functions/is-browser';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host';
+import { setupBrowserForEditing } from '../scripts/init-editing';
+import type { BuilderAnimation } from '../types/builder-block';
+import type { BuilderContent } from '../types/builder-content';
+import { logger } from './logger';
+type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
+  callbacks: {
+    contentUpdate: (updatedContent: BuilderContent) => void;
+    animation: (updatedContent: BuilderAnimation) => void;
+    configureSdk: (updatedContent: any) => void;
+  };
+};
+export const createEditorListener = ({
+  model,
+  trustedHosts,
+  callbacks
+}: ContentListener) => {
+  return (event: MessageEvent<any>): void => {
+    if (!isFromTrustedHost(trustedHosts, event)) {
+      return;
+    }
+    const {
+      data
+    } = event;
+    if (data) {
+      switch (data.type) {
+        case 'builder.configureSdk':
+          {
+            callbacks.configureSdk(data.data);
+            break;
+          }
+        case 'builder.triggerAnimation':
+          {
+            callbacks.animation(data.data);
+            break;
+          }
+        case 'builder.contentUpdate':
+          {
+            const messageContent = data.data;
+            const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+            const contentData = messageContent.data;
+            if (key === model) {
+              callbacks.contentUpdate(contentData);
+            }
+            break;
+          }
+      }
+    }
+  };
+};
+type SubscribeToEditor = (
+/**
+ * The Builder `model` to subscribe to
+ */
+model: string,
+/**
+ * The callback function to call when the content is updated.
+ */
+callback: (updatedContent: BuilderContent) => void,
+/**
+ * Extra options for the listener.
+ */
+options?: {
+  /**
+   * List of hosts to allow editing content from.
+   */
+  trustedHosts?: string[] | undefined;
+}) => () => void;
+
+/**
+ * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
+ * Sends the updated `content` to the `callback` function.
+ */
+export const subscribeToEditor: SubscribeToEditor = (model, callback, options) => {
+  if (!isBrowser) {
+    logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
+    return () => {};
+  }
+  setupBrowserForEditing();
+  const listener = createEditorListener({
+    callbacks: {
+      contentUpdate: callback,
+      animation: () => {},
+      configureSdk: () => {}
+    },
+    model,
+    trustedHosts: options?.trustedHosts
+  });
+  window.addEventListener('message', listener);
+  return () => {
+    window.removeEventListener('message', listener);
+  };
+}

package/src/helpers/time.ts

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

package/src/helpers/url.ts

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

@@ -0,0 +1,37 @@
+import type { CanTrack } from '../types/can-track';
+import { getLocalStorageItem, setLocalStorageItem } from './localStorage';
+import { checkIsDefined } from './nullable';
+import { uuid } from './uuid';
+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/src/index-helpers/blocks-exports.ts

@@ -0,0 +1,16 @@
+export { default as Button } from '../blocks/button/index';
+export { default as Columns } from '../blocks/columns/index';
+export { default as Fragment } from '../blocks/fragment/index';
+export { default as Image } from '../blocks/image/index';
+export { default as Section } from '../blocks/section/index';
+export { default as Symbol } from '../blocks/symbol/index';
+export { default as Text } from '../blocks/text/index';
+// TO-DO: This file breaks due to this issue:
+// https://github.com/expo/web-examples/issues/73
+// For now, we do not import it elsewhere to avoid crashing Expo servers on web when importing the SDK.
+// export { default as Video } from '../blocks/video/video';
+
+import { default as Blocks } from '../components/blocks/index';
+import { default as Content } from '../components/content-variants/index';
+
+export { Blocks, Content };

package/src/index-helpers/top-of-file.ts

@@ -0,0 +1,2 @@
+// this is needed because react-native's URL polyfill is lacking all features we use, such as `URLSearchParams.set()`.
+import 'react-native-url-polyfill/auto';

package/src/index.ts

@@ -0,0 +1,15 @@
+// ignore prettier formatting for this file because the order of exports is meaningful
+// prettier-ignore
+export * from './index-helpers/top-of-file';
+
+/**
+ * In the React SDK, this file is marked with `use client`.
+ */
+// prettier-ignore
+export * from './index-helpers/blocks-exports';
+
+/**
+ * In the React SDK, this file is not marked with `use client`, to allow
+ * NextJS App Directory to use the SDK helper functions without issues.
+ */
+export * from './server-index'

package/src/scripts/init-editing.ts

@@ -0,0 +1,119 @@
+import { SDK_VERSION } from '../constants/sdk-version';
+import { TARGET } from '../constants/target';
+import { isBrowser } from '../functions/is-browser';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host';
+import { register } from '../functions/register';
+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: {
+  enrich?: boolean;
+  includeRefs?: boolean;
+  locale?: string;
+  trustedHosts?: string[];
+} = {}) => {
+  if (isSetupForEditing) {
+    return;
+  }
+  isSetupForEditing = true;
+  if (isBrowser()) {
+    window.parent?.postMessage({
+      type: 'builder.sdkInfo',
+      data: {
+        target: TARGET,
+        version: 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', (event: MessageEvent) => {
+      if (!isFromTrustedHost(options.trustedHosts, event)) {
+        return;
+      }
+      const {
+        data
+      } = event;
+      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/src/server-index.ts

@@ -0,0 +1,43 @@
+export * from './index-helpers/top-of-file';
+
+/**
+ * Component Prop types
+ */
+export type { ButtonProps } from './blocks/button/button.types';
+export type { ColumnProps } from './blocks/columns/columns.types';
+export type { FragmentProps } from './blocks/fragment/fragment.types';
+export type { ImageProps } from './blocks/image/image.types';
+export type { SectionProps } from './blocks/section/section.types';
+export type { SymbolProps } from './blocks/symbol/symbol.types';
+export type { TextProps } from './blocks/text/text.types';
+export type { VideoProps } from './blocks/video/video.types';
+export type { BlocksProps } from './components/blocks/blocks.types';
+export type { ContentVariantsPrps as ContentProps } from './components/content-variants/content-variants.types';
+
+/**
+ * General Builder types
+ */
+export type { RegisteredComponent } from './context/types';
+export type { BuilderBlock } from './types/builder-block';
+export type { BuilderContent } from './types/builder-content';
+export type { ComponentInfo } from './types/components';
+
+/**
+ * Helper functions
+ */
+export { isEditing } from './functions/is-editing';
+export { isPreviewing } from './functions/is-previewing';
+export { createRegisterComponentMessage } from './functions/register-component';
+export { register } from './functions/register';
+export type { InsertMenuConfig, InsertMenuItem } from './functions/register';
+export { setEditorSettings } from './functions/set-editor-settings';
+export type { Settings } from './functions/set-editor-settings';
+export { getBuilderSearchParams } from './functions/get-builder-search-params/index';
+export { track } from './functions/track/index';
+export { subscribeToEditor } from './helpers/subscribe-to-editor';
+
+/**
+ * Content fetching
+ */
+export { fetchBuilderProps } from './functions/fetch-builder-props';
+export { _processContentResult, fetchEntries, fetchOneEntry } from './functions/get-content/index'

package/src/types/api-version.ts

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

package/src/types/builder-block.ts

@@ -0,0 +1,89 @@
+type JSONValue = string | number | boolean | JSONObject | JSONArray;
+interface JSONObject {
+  [x: string]: JSONValue;
+}
+interface JSONArray extends Array<JSONValue> {}
+export interface AnimationStep {
+  // First one is always start state
+  // isStartState?: boolean;
+  styles: {
+    [key: string]: string;
+  };
+  delay?: number;
+}
+export interface BuilderAnimation {
+  elementId: string;
+  trigger: string;
+  steps: AnimationStep[];
+  duration: number;
+  delay?: number;
+  easing?: string;
+  // TODO: deprecate - only here because of an API bug
+  id?: string;
+  // only apply in scrollInView
+  repeat?: boolean;
+  // only apply in scrollInView, number from -1 to 1
+  thresholdPercent?: number;
+}
+/** @todo typedoc this */
+export interface BuilderBlock {
+  '@type': '@builder.io/sdk:Element';
+  '@version'?: number;
+  id?: string;
+  tagName?: string;
+  layerName?: string;
+  groupLocked?: boolean;
+  layerLocked?: boolean;
+  /** @todo make alias for properties.class */
+  class?: string;
+  children?: BuilderBlock[];
+  responsiveStyles?: {
+    large?: Partial<CSSStyleDeclaration>;
+    medium?: Partial<CSSStyleDeclaration>;
+    small?: Partial<CSSStyleDeclaration>;
+    /** @deprecated */
+    xsmall?: Partial<CSSStyleDeclaration>;
+  };
+  component?: {
+    name: string;
+    options?: any;
+    tag?: string;
+  };
+  bindings?: {
+    [key: string]: string;
+  };
+  meta?: {
+    [key: string]: JSONValue;
+  };
+  actions?: {
+    [key: string]: string;
+  };
+  properties?: {
+    [key: string]: string;
+  };
+  code?: {
+    bindings?: {
+      [key: string]: string;
+    };
+    actions?: {
+      [key: string]: string;
+    };
+  };
+  repeat?: {
+    collection: string;
+    itemName?: string;
+  } | null;
+  animations?: BuilderAnimation[];
+  style?: Partial<CSSStyleDeclaration>;
+  href?: string;
+
+  /**
+   * generated by the "Hide If" binding
+   */
+  hide?: boolean;
+
+  /**
+   * generated by the "Show If" binding
+   */
+  show?: boolean;
+}

package/src/types/builder-content.ts

@@ -0,0 +1,47 @@
+import type { BuilderBlock } from './builder-block';
+import type { Input } from './input';
+import type { Nullable } from './typescript';
+export interface Breakpoints {
+  small: number;
+  medium: number;
+}
+export interface BuilderContentVariation {
+  data?: {
+    title?: string;
+    blocks?: BuilderBlock[];
+    inputs?: Input[];
+    state?: {
+      [key: string]: any;
+    };
+    jsCode?: string;
+    tsCode?: string;
+    httpRequests?: {
+      [key: string]: string;
+    };
+    [key: string]: any;
+  };
+  name?: string;
+  testRatio?: number;
+  id?: string;
+  meta?: {
+    breakpoints?: Nullable<Breakpoints>;
+    [key: string]: any;
+  };
+}
+
+// TODO: separate full and partial versions
+export interface BuilderContent extends BuilderContentVariation {
+  // TODO: query
+  '@version'?: number;
+  published?: 'published' | 'draft' | 'archived';
+  modelId?: string;
+  priority?: number;
+  lastUpdated?: number;
+  startDate?: number;
+  endDate?: number;
+  variations?: {
+    [id: string]: BuilderContentVariation;
+  };
+  testVariationId?: string;
+  testVariationName?: string;
+}

package/src/types/builder-props.ts

@@ -0,0 +1,12 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../context/types';
+import type { BuilderBlock } from './builder-block';
+export type BuilderDataProps = {
+  builderBlock: BuilderBlock;
+  builderContext: BuilderContextInterface;
+};
+export type BuilderComponentsProp = {
+  builderComponents: RegisteredComponents;
+};
+export type BuilderLinkComponentProp = {
+  builderLinkComponent?: any;
+}

package/src/types/can-track.ts

@@ -0,0 +1,3 @@
+export type CanTrack = {
+  canTrack: boolean;
+}