@builder.io/sdk-react-native 3.0.6 → 4.0.1

package/src/components/content/components/enable-editor.tsx

@@ -137,6 +137,9 @@ function EnableEditor(props: BuilderEditorProps) {
         contentUpdate: (newContent) => {
           mergeNewContent(newContent);
         },
+        stateUpdate: (newState) => {
+          mergeNewRootState(newState);
+        },
       },
     })(event);
   }
@@ -246,12 +249,13 @@ function EnableEditor(props: BuilderEditorProps) {
             trustedHosts: props.trustedHosts,
           }
         : {}),
+      modelName: props.model ?? "",
+      apiKey: props.apiKey,
     });
     Object.values<ComponentInfo>(
       props.builderContextSignal.componentInfos
     ).forEach((registeredComponent) => {
       if (
-        !props.model ||
         !registeredComponent.models?.length ||
         registeredComponent.models.includes(props.model)
       ) {
@@ -288,7 +292,7 @@ function EnableEditor(props: BuilderEditorProps) {
         (!props.content || searchParamPreviewId === props.content.id))
     ) {
       fetchOneEntry({
-        model: props.model || "",
+        model: props.model,
         apiKey: props.apiKey,
         apiVersion: props.builderContextSignal.apiVersion,
         ...(searchParamPreviewModel === "BUILDER_STUDIO" &&
@@ -335,12 +339,13 @@ function EnableEditor(props: BuilderEditorProps) {
                 trustedHosts: props.trustedHosts,
               }
             : {}),
+          modelName: props.model ?? "",
+          apiKey: props.apiKey,
         });
         Object.values<ComponentInfo>(
           props.builderContextSignal.componentInfos
         ).forEach((registeredComponent) => {
           if (
-            !props.model ||
             !registeredComponent.models?.length ||
             registeredComponent.models.includes(props.model)
           ) {
@@ -397,7 +402,7 @@ function EnableEditor(props: BuilderEditorProps) {
             (!props.content || searchParamPreviewId === props.content.id))
         ) {
           fetchOneEntry({
-            model: props.model || "",
+            model: props.model,
             apiKey: props.apiKey,
             apiVersion: props.builderContextSignal.apiVersion,
             ...(searchParamPreviewModel === "BUILDER_STUDIO" &&

package/src/components/content/content.tsx

@@ -104,7 +104,7 @@ function ContentComponent(props: ContentProps) {
       BlocksWrapper: props.blocksWrapper || ScrollView,
       BlocksWrapperProps: props.blocksWrapperProps || {},
       nonce: props.nonce || "",
-      model: props.model || "",
+      model: props.model,
     }));
 
   const hasInitialized = useRef(false);

package/src/components/content-variants/content-variants.types.ts

@@ -7,12 +7,12 @@ export interface ContentVariantsPrps extends ExtraFrameworkProps {
   /**
    * The Builder content JSON to render (required).
    */
-  content?: Nullable<BuilderContent>;
+  content: Nullable<BuilderContent>;
 
   /**
    * The Builder content `model` to render (required).
    */
-  model?: string;
+  model: string;
 
   /**
    * Additional data to inject into your Builder content (optional).

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.6"
+export const SDK_VERSION = "4.0.1"

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

@@ -4,10 +4,12 @@ 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 type { Dictionary } from '../types/typescript';
 import { logger } from './logger';
 type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
   callbacks: {
     contentUpdate: (updatedContent: BuilderContent) => void;
+    stateUpdate: (newState: Dictionary<string>) => void;
     animation: (updatedContent: BuilderAnimation) => void;
     configureSdk: (updatedContent: any) => void;
   };
@@ -36,6 +38,16 @@ export const createEditorListener = ({
             callbacks.animation(data.data);
             break;
           }
+        case 'builder.resetState':
+          {
+            const messageContent = data.data;
+            const modelName = messageContent.model;
+            const newState = messageContent?.state;
+            if (modelName === model && newState) {
+              callbacks.stateUpdate(newState);
+            }
+            break;
+          }
         case 'builder.contentUpdate':
           {
             const messageContent = data.data;
@@ -50,19 +62,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,20 +90,29 @@ 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,
       animation: () => {},
-      configureSdk: () => {}
+      configureSdk: () => {},
+      stateUpdate: () => {}
     },
     model,
-    trustedHosts: options?.trustedHosts
+    trustedHosts
   });
   window.addEventListener('message', listener);
   return () => {

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;
   }
@@ -48,6 +50,9 @@ export const setupBrowserForEditing = (options: {
         // scope our '+ add block' button styling
         supportsAddBlockScoping: true,
         supportsCustomBreakpoints: true,
+        modelName: options.modelName,
+        apiKey: options.apiKey,
+        supportsXSmallBreakpoint: TARGET === 'reactNative' ? false : true,
         blockLevelPersonalization: true
       }
     }, '*');

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;
 }