@builder.io/sdk-react-native 3.0.5 → 4.0.0

package/src/constants/device-sizes.ts

@@ -1,13 +1,18 @@
 import { fastClone } from '../functions/fast-clone';
-export type SizeName = 'large' | 'medium' | 'small';
+export type SizeName = 'large' | 'medium' | 'small' | 'xsmall';
 interface Size {
   min: number;
   default: number;
   max: number;
 }
 const SIZES: Record<SizeName, Size> = {
+  xsmall: {
+    min: 0,
+    default: 160,
+    max: 320
+  },
   small: {
-    min: 320,
+    min: 321,
     default: 321,
     max: 640
   },
@@ -24,19 +29,33 @@ const SIZES: Record<SizeName, Size> = {
 };
 export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 interface Breakpoints {
+  xsmall?: number;
   small?: number;
   medium?: number;
 }
-export const getSizesForBreakpoints = ({
-  small,
-  medium
-}: Breakpoints) => {
+export const getSizesForBreakpoints = (breakpoints: Breakpoints) => {
   const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
 
+  if (!breakpoints) {
+    return newSizes;
+  }
+  const {
+    xsmall,
+    small,
+    medium
+  } = breakpoints;
+  if (xsmall) {
+    const xsmallMin = Math.floor(xsmall / 2);
+    newSizes.xsmall = {
+      max: xsmall,
+      min: xsmallMin,
+      default: xsmallMin + 1
+    };
+  }
   if (!small || !medium) {
     return newSizes;
   }
-  const smallMin = Math.floor(small / 2);
+  const smallMin = xsmall ? newSizes.xsmall.max + 1 : Math.floor(small / 2);
   newSizes.small = {
     max: small,
     min: smallMin,

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.5"
+export const SDK_VERSION = "4.0.0"

package/src/helpers/canTrack.ts

@@ -1,2 +1,7 @@
 import { checkIsDefined } from './nullable';
-export const getDefaultCanTrack = (canTrack?: boolean) => checkIsDefined(canTrack) ? canTrack : true
+import { userAttributesService } from './user-attributes';
+export const getDefaultCanTrack = (canTrack?: boolean) => {
+  const result = checkIsDefined(canTrack) ? canTrack : true;
+  userAttributesService.setCanTrack(result);
+  return result;
+}

package/src/helpers/subscribe-to-editor.ts

@@ -50,19 +50,24 @@ export const createEditorListener = ({
     }
   };
 };
-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?: {
+type SubscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}: {
+  /**
+   * The Builder `model` to subscribe to
+   */
+  model: string;
+  /**
+   * Builder API Key to use for the editor.
+   */
+  apiKey: string;
+  /**
+   * The callback function to call when the content is updated.
+   */
+  callback: (updatedContent: BuilderContent) => void;
   /**
    * List of hosts to allow editing content from.
    */
@@ -73,12 +78,20 @@ options?: {
  * 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) => {
+export const subscribeToEditor: SubscribeToEditor = ({
+  model,
+  apiKey,
+  callback,
+  trustedHosts
+}) => {
   if (!isBrowser) {
     logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
     return () => {};
   }
-  setupBrowserForEditing();
+  setupBrowserForEditing({
+    modelName: model,
+    apiKey
+  });
   const listener = createEditorListener({
     callbacks: {
       contentUpdate: callback,
@@ -86,7 +99,7 @@ export const subscribeToEditor: SubscribeToEditor = (model, callback, options) =
       configureSdk: () => {}
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener('message', listener);
   return () => {

package/src/helpers/user-attributes.ts

@@ -0,0 +1,49 @@
+import { isBrowser } from '../functions/is-browser';
+import { getCookieSync, setCookie } from './cookie';
+export interface UserAttributes {
+  [key: string]: any;
+}
+export const USER_ATTRIBUTES_COOKIE_NAME = 'builder.userAttributes';
+export function createUserAttributesService() {
+  let canTrack = true;
+  const subscribers = new Set<(attrs: UserAttributes) => void>();
+  return {
+    setUserAttributes(newAttrs: UserAttributes) {
+      if (!isBrowser()) {
+        return;
+      }
+      const userAttributes: UserAttributes = {
+        ...this.getUserAttributes(),
+        ...newAttrs
+      };
+      setCookie({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        value: JSON.stringify(userAttributes),
+        canTrack
+      });
+      subscribers.forEach(callback => callback(userAttributes));
+    },
+    getUserAttributes() {
+      if (!isBrowser()) {
+        return {};
+      }
+      return JSON.parse(getCookieSync({
+        name: USER_ATTRIBUTES_COOKIE_NAME,
+        canTrack
+      }) || '{}');
+    },
+    subscribeOnUserAttributesChange(callback: (attrs: UserAttributes) => void) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+    setCanTrack(value: boolean) {
+      canTrack = value;
+    }
+  };
+}
+export const userAttributesService = createUserAttributesService();
+export const setClientUserAttributes = (attributes: UserAttributes) => {
+  userAttributesService.setUserAttributes(attributes);
+}

package/src/scripts/init-editing.ts

@@ -28,11 +28,13 @@ export const registerInsertMenu = () => {
 };
 let isSetupForEditing = false;
 export const setupBrowserForEditing = (options: {
+  modelName: string;
+  apiKey: string;
   enrich?: boolean;
   includeRefs?: boolean;
   locale?: string;
   trustedHosts?: string[];
-} = {}) => {
+}) => {
   if (isSetupForEditing) {
     return;
   }
@@ -47,7 +49,11 @@ export const setupBrowserForEditing = (options: {
         // Supports builder-model="..." attribute which is needed to
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
-        supportsCustomBreakpoints: true
+        supportsCustomBreakpoints: true,
+        modelName: options.modelName,
+        apiKey: options.apiKey,
+        supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
+        blockLevelPersonalization: true
       }
     }, '*');
     window.parent?.postMessage({

package/src/types/builder-block.ts

@@ -41,7 +41,6 @@ export interface BuilderBlock {
     large?: Partial<CSSStyleDeclaration>;
     medium?: Partial<CSSStyleDeclaration>;
     small?: Partial<CSSStyleDeclaration>;
-    /** @deprecated */
     xsmall?: Partial<CSSStyleDeclaration>;
   };
   component?: {

package/src/types/builder-content.ts

@@ -2,6 +2,7 @@ import type { BuilderBlock } from './builder-block';
 import type { Input } from './input';
 import type { Nullable } from './typescript';
 export interface Breakpoints {
+  xsmall?: number;
   small: number;
   medium: number;
 }

package/src/types/input.ts

@@ -125,6 +125,7 @@ export interface Input {
    * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
    */
   model?: string;
+  behavior?: string;
   valueType?: {
     type?: string;
   };