@builder.io/sdk-react-native 4.2.2 → 4.2.4

package/src/blocks/img/component-info.ts

@@ -1,7 +1,6 @@
 import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,
   image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
@@ -11,7 +10,38 @@ export const componentInfo: ComponentInfo = {
     type: 'file',
     allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
+  }, {
+    name: 'backgroundSize',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: [{
+      label: 'contain',
+      value: 'contain',
+      helperText: 'The image should never get cropped'
+    }, {
+      label: 'cover',
+      value: 'cover',
+      helperText: "The image should fill it's box, cropping when needed"
+    }]
+  }, {
+    name: 'backgroundPosition',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'altText',
+    type: 'string',
+    helperText: 'Text to display when the user has images off'
+  }, {
+    name: 'title',
+    type: 'string',
+    helperText: 'Text to display when hovering over the asset'
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+    advanced: true,
+    defaultValue: 0.7041
   }],
-  noWrap: true,
-  static: true
+  noWrap: true
 }

package/src/blocks/img/img.tsx

@@ -21,12 +21,14 @@ export interface ImgProps {
     | "top right"
     | "bottom left"
     | "bottom right";
+  aspectRatio?: number;
+  title?: string;
 }
 
 import { isEditing } from "../../functions/is-editing";
 import { filterAttrs } from "../helpers";
 import { getSrcSet } from "../image/image.helpers";
-import { setAttrs } from "../helpers";
+import { getClassPropName } from "../../functions/get-class-prop-name";
 
 function ImgComponent(props: ImgProps) {
   function srcSetToUse() {
@@ -42,19 +44,32 @@ function ImgComponent(props: ImgProps) {
     return getSrcSet(url);
   }
 
+  function imgAttrs() {
+    const attrs = {
+      ...props.attributes,
+      ...{},
+      [getClassPropName()]: `builder-raw-img ${
+        props.attributes[getClassPropName()] || ""
+      }`,
+    } as Record<string, any>;
+    delete attrs.style;
+    return attrs;
+  }
+
   return (
     <Image
       loading="lazy"
+      key={(isEditing() && props.imgSrc) || "default-key"}
+      alt={props.altText}
+      title={props.title}
+      source={{ uri: props.imgSrc || props.image }}
+      {...imgAttrs()}
       style={{
         objectFit: props.backgroundSize || "cover",
         objectPosition: props.backgroundPosition || "center",
+        aspectRatio: props.aspectRatio || undefined,
+        ...(props.attributes?.style || {}),
       }}
-      key={(isEditing() && props.imgSrc) || "default-key"}
-      alt={props.altText}
-      source={{ uri: props.imgSrc || props.image }}
-      srcSet={srcSetToUse()}
-      {...{}}
-      {...props.attributes}
     />
   );
 }

package/src/blocks/text/component-info.ts

@@ -7,7 +7,6 @@ export const componentInfo: ComponentInfo = {
   } : {},
   name: 'Text',
   static: true,
-  isRSC: true,
   image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
   inputs: [{
     name: 'text',

package/src/components/block/block.tsx

@@ -30,11 +30,11 @@ import {
   provideLinkComponent,
   provideRegisteredComponents,
 } from "./block.helpers";
-import BlockStyles from "./components/block-styles";
 import BlockWrapper from "./components/block-wrapper";
 import type { ComponentProps } from "./components/component-ref/component-ref.helpers";
 import ComponentRef from "./components/component-ref/component-ref";
 import RepeatedBlock from "./components/repeated-block";
+import StyleWrapper from "./components/style-wrapper";
 import { memo } from "react";
 import { View } from "react-native";
 
@@ -153,7 +153,11 @@ function Block(props: BlockProps) {
     <>
       {canShowBlock() ? (
         <>
-          <BlockStyles block={processedBlock()} context={props.context} />
+          <StyleWrapper
+            block={processedBlock()}
+            context={props.context}
+            id={props.block.id}
+          />
           {!blockComponent?.()?.noWrap ? (
             <>
               {!repeatItem() ? (

package/src/components/block/components/interactive-element.tsx

@@ -10,12 +10,15 @@ export type InteractiveElementProps = {
   includeBlockProps: boolean;
   children?: any;
 };
+import { TARGET } from "../../../constants/target";
 import type { BuilderContextInterface } from "../../../context/types";
 import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
+import { isEditing } from "../../../server-index";
 import type { BuilderBlock } from "../../../types/builder-block";
 import type { Dictionary } from "../../../types/typescript";
 import Awaiter from "../../awaiter";
+import LiveEdit from "../../live-edit";
 
 function InteractiveElement(props: InteractiveElementProps) {
   const [forceRenderCount, setForceRenderCount] = useState(() => 0);
@@ -57,6 +60,14 @@ function InteractiveElement(props: InteractiveElementProps) {
             {props.children}
           </Awaiter>
         </>
+      ) : TARGET === "rsc" && isEditing() ? (
+        <LiveEdit
+          Wrapper={props.Wrapper}
+          id={props.block.id || ""}
+          attributes={attributes()}
+        >
+          {props.children}
+        </LiveEdit>
       ) : (
         <props.Wrapper {...targetWrapperProps()} attributes={attributes()}>
           {props.children}

package/src/components/block/components/live-edit-block-styles.tsx

@@ -0,0 +1,154 @@
+import * as React from "react";
+import {} from "react-native";
+
+type LiveEditBlockStylesProps = {
+  id?: any;
+  contextProvider: BuilderContextInterface;
+};
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../../constants/device-sizes";
+import { TARGET } from "../../../constants/target";
+import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
+import { getProcessedBlock } from "../../../functions/get-processed-block";
+import { createCssClass } from "../../../helpers/css";
+import { findBlockById } from "../../../helpers/find-block";
+import { checkIsDefined } from "../../../helpers/nullable";
+import type {
+  BuilderBlock,
+  BuilderContextInterface,
+} from "../../../server-index";
+import InlinedStyles from "../../inlined-styles";
+
+function LiveEditBlockStyles(props: LiveEditBlockStylesProps) {
+  function block() {
+    return findBlockById(props.contextProvider.content!, props.id);
+  }
+
+  function processedBlock() {
+    const foundBlock = block();
+    if (!foundBlock) {
+      return null;
+    }
+    const blockToUse = foundBlock.repeat?.collection
+      ? foundBlock
+      : getProcessedBlock({
+          block: foundBlock,
+          localState: props.contextProvider.localState,
+          rootState: props.contextProvider.rootState,
+          rootSetState: props.contextProvider.rootSetState,
+          context: props.contextProvider.context,
+        });
+    return blockToUse;
+  }
+
+  function canShowBlock() {
+    if (checkIsDefined(processedBlock?.()?.hide)) {
+      return !processedBlock?.()?.hide;
+    }
+    if (checkIsDefined(processedBlock?.()?.show)) {
+      return processedBlock?.()?.show;
+    }
+    return true;
+  }
+
+  function css() {
+    const styles = processedBlock?.()?.responsiveStyles;
+    const content = props.contextProvider.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+      content?.meta?.breakpoints || {}
+    );
+    const contentHasXSmallBreakpoint = Boolean(
+      content?.meta?.breakpoints?.xsmall
+    );
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const xsmallStyles = styles?.xsmall;
+    const className = processedBlock?.()?.id;
+    if (!className) {
+      return "";
+    }
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "medium",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "small",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const xsmallStylesClass =
+      xsmallStyles && contentHasXSmallBreakpoint
+        ? createCssClass({
+            className,
+            styles: xsmallStyles,
+            mediaQuery: getMaxWidthQueryForSize(
+              "xsmall",
+              sizesWithUpdatedBreakpoints
+            ),
+          })
+        : "";
+    const hoverAnimation =
+      processedBlock().animations &&
+      processedBlock().animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+      const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+      hoverStylesClass =
+        createCssClass({
+          className: `${className}:hover`,
+          styles: {
+            ...hoverStyles,
+            transition: `all ${hoverAnimation.duration}s ${camelToKebabCase(
+              hoverAnimation.easing
+            )}`,
+            transitionDelay: hoverAnimation.delay
+              ? `${hoverAnimation.delay}s`
+              : "0s",
+          },
+        }) || "";
+    }
+    return [
+      largeStylesClass,
+      mediumStylesClass,
+      smallStylesClass,
+      xsmallStylesClass,
+      hoverStylesClass,
+    ].join(" ");
+  }
+
+  return (
+    <>
+      {TARGET === "rsc" && css() && canShowBlock() ? (
+        <>
+          <InlinedStyles
+            id="builderio-block"
+            styles={css()}
+            nonce={props.contextProvider.nonce}
+          />
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default LiveEditBlockStyles;

package/src/components/block/components/style-wrapper.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import {} from "react-native";
+import { useState, useContext, useEffect } from "react";
+
+type StyleWrapperProps = {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  id?: string;
+};
+import { TARGET } from "../../../constants/target";
+import { BuilderContext } from "../../../context/index";
+import {
+  isEditing,
+  BuilderBlock,
+  BuilderContextInterface,
+} from "../../../server-index";
+import BlockStyles from "./block-styles";
+import LiveEditBlockStyles from "./live-edit-block-styles";
+
+function StyleWrapper(props: StyleWrapperProps) {
+  const [isClientEditing, setIsClientEditing] = useState(() => false);
+
+  const [isHydrated, setIsHydrated] = useState(() => false);
+
+  const contextProvider = useContext(BuilderContext);
+
+  useEffect(() => {}, []);
+
+  return (
+    <>
+      {isHydrated ? (
+        <>
+          {TARGET === "rsc" && isClientEditing ? (
+            <LiveEditBlockStyles
+              id={props.block.id}
+              contextProvider={contextProvider}
+            />
+          ) : (
+            <>
+              <BlockStyles block={props.block} context={props.context} />
+            </>
+          )}
+        </>
+      ) : (
+        <>
+          <BlockStyles block={props.block} context={props.context} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default StyleWrapper;

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

@@ -51,7 +51,10 @@ import { getInteractionPropertiesForEvent } from "../../../functions/track/inter
 import { getDefaultCanTrack } from "../../../helpers/canTrack";
 import { getCookieSync } from "../../../helpers/cookie";
 import { postPreviewContent } from "../../../helpers/preview-lru-cache/set";
-import { createEditorListener } from "../../../helpers/subscribe-to-editor";
+import {
+  createEditorListener,
+  EditType,
+} from "../../../helpers/subscribe-to-editor";
 import { setupBrowserForEditing } from "../../../scripts/init-editing";
 import type { BuilderContent } from "../../../types/builder-content";
 import type { ComponentInfo } from "../../../types/components";
@@ -70,11 +73,15 @@ function EnableEditor(props: BuilderEditorProps) {
   const elementRef = useRef<HTMLDivElement>(null);
   const [hasExecuted, setHasExecuted] = useState<boolean>(() => false);
 
+  const [contextValue, setContextValue] = useState<any>(
+    () => props.builderContextSignal
+  );
+
   const [prevData, setPrevData] = useState(() => null);
 
   const [prevLocale, setPrevLocale] = useState(() => "");
 
-  function mergeNewRootState(newData: Dictionary<any>) {
+  function mergeNewRootState(newData: Dictionary<any>, editType?: EditType) {
     const combinedState = {
       ...props.builderContextSignal.rootState,
       ...newData,
@@ -87,9 +94,17 @@ function EnableEditor(props: BuilderEditorProps) {
         rootState: combinedState,
       }));
     }
+    if (props.builderContextSignal.rootSetState) {
+      props.builderContextSignal.rootSetState(combinedState);
+    } else {
+      props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+        ...PREVIOUS_VALUE,
+        rootState: combinedState,
+      }));
+    }
   }
 
-  function mergeNewContent(newContent: BuilderContent) {
+  function mergeNewContent(newContent: BuilderContent, editType?: EditType) {
     const newContentValue = {
       ...props.builderContextSignal.content,
       ...newContent,
@@ -148,11 +163,11 @@ function EnableEditor(props: BuilderEditorProps) {
         animation: (animation) => {
           triggerAnimation(animation);
         },
-        contentUpdate: (newContent) => {
-          mergeNewContent(newContent);
+        contentUpdate: (newContent, editType) => {
+          mergeNewContent(newContent, editType);
         },
-        stateUpdate: (newState) => {
-          mergeNewRootState(newState);
+        stateUpdate: (newState, editType) => {
+          mergeNewRootState(newState, editType);
         },
       },
     })(event);

package/src/components/live-edit.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { useContext } from "react";
+
+type LiveEditProps = {
+  children?: any;
+  id?: any;
+  Wrapper?: any;
+  attributes?: any;
+};
+import { BuilderContext } from "../context/index";
+import { findBlockById } from "../helpers/find-block";
+
+function LiveEdit(props: LiveEditProps) {
+  function block() {
+    return findBlockById(context.content!, props.id);
+  }
+
+  function options() {
+    return block?.()?.component?.options || {};
+  }
+
+  const context = useContext(BuilderContext);
+
+  return (
+    <props.Wrapper {...options()} attributes={props.attributes}>
+      {props.children}
+    </props.Wrapper>
+  );
+}
+
+export default LiveEdit;

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "4.2.2"
+export const SDK_VERSION = "4.2.4"

package/src/functions/get-builder-search-params/index.ts

@@ -5,8 +5,14 @@ const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
 const BUILDER_OPTIONS_PREFIX = 'options.';
 
 /**
- * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
- * relevant to the Builder SDK.
+ * Receives a `URLSearchParams` object or a regular query object, and returns
+ * the subset of query params that are relevant to the Builder SDK.
+ *
+ * Outputs a key-value object to be passed to `fetchOneEntry` or `fetchEntries`
+ * functions as the `options` argument.
+ *
+ * NOTE: This function is generally not needed. Instead, it is recommended to use `isPreviewing()`
+ * to check if the current page requires previewed content.
  *
  * @returns
  */

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

@@ -39,15 +39,10 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   url.searchParams.set('limit', String(limit));
   url.searchParams.set('noTraverse', String(noTraverse));
   url.searchParams.set('includeRefs', String(true));
-  const finalLocale = locale || userAttributes?.locale;
-  let finalUserAttributes: Record<string, any> = userAttributes || {};
-  if (finalLocale) {
-    url.searchParams.set('locale', finalLocale);
-    finalUserAttributes = {
-      locale: finalLocale,
-      ...finalUserAttributes
-    };
+  if (locale) {
+    url.searchParams.set('locale', locale);
   }
+  let finalUserAttributes: Record<string, any> = userAttributes || {};
   if (enrich) url.searchParams.set('enrich', String(enrich));
   url.searchParams.set('omit', omit ?? 'meta.componentsUsed');
   if (fields) {

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

@@ -15,6 +15,14 @@ const checkContentHasResults = (content: ContentResponse): content is ContentRes
  * Returns the first content entry that matches the given options.
  */
 export async function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null> {
+  const finalLocale = options.locale || options.userAttributes?.locale;
+  if (finalLocale) {
+    options.locale = finalLocale;
+    options.userAttributes = {
+      locale: finalLocale,
+      ...options.userAttributes
+    };
+  }
   const allContent = await fetchEntries({
     ...options,
     limit: 1

package/src/functions/is-previewing.ts

@@ -1,16 +1,27 @@
 import type { Search } from '../helpers/search/search';
 import { getSearchString } from '../helpers/search/search';
 import { isBrowser } from './is-browser';
-export function isPreviewing(_search?: Search) {
-  const search = _search || (isBrowser() ? window.location.search : undefined);
+
+/**
+ * Checks the current URL's search parameters to see if it is attempting to
+ * preview Builder Content.
+ *
+ * When called on the client, it uses `window.location.search`.
+ * When called on the server (SSR), it requires a `search` argument.
+ *
+ * @param search - The search parameters to check. Can be a URL string (containing the search parameters), `URLSearchParams`, or a key-value object containing the search parameters.
+ * @returns `true` if the current page is being previewed, `false` otherwise.
+ */
+export function isPreviewing(search?: Search) {
+  const searchToUse = search || (isBrowser() ? window.location.search : undefined);
 
   /**
    * If this function is called on the server without an explicit `search` argument,
    * then it can't check if the user is previewing, and will return `false`.
    */
-  if (!search) {
+  if (!searchToUse) {
     return false;
   }
-  const normalizedSearch = getSearchString(search);
+  const normalizedSearch = getSearchString(searchToUse);
   return Boolean(normalizedSearch.indexOf('builder.preview=') !== -1);
 }

package/src/helpers/find-block.ts

@@ -0,0 +1,40 @@
+import type { BuilderBlock, BuilderContent } from '../server-index';
+
+/**
+ * Recursively searches for a block by ID.
+ *
+ * @param content The Builder content to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ */
+export const findBlockById = (content: BuilderContent, id: string): BuilderBlock | null => {
+  return findBlockInTree(content.data?.blocks, id);
+};
+
+/**
+ * Helper function to recursively search through block tree.
+ *
+ * @param blocks The blocks to search through.
+ * @param id The ID of the block to search for.
+ * @returns The block if found, otherwise null.
+ * @private This is an internal implementation detail.
+ */
+export const findBlockInTree = (blocks: BuilderBlock[] | undefined, id: string): BuilderBlock | null => {
+  if (!blocks) return null;
+  for (const block of blocks) {
+    if (block.id === id) return block;
+    if (block.children) {
+      const child = findBlockInTree(block.children, id);
+      if (child) return child;
+    }
+    if (block.component?.name === 'Columns' && block.component?.options?.columns) {
+      for (const column of block.component.options.columns) {
+        if (column.blocks) {
+          const child = findBlockInTree(column.blocks, id);
+          if (child) return child;
+        }
+      }
+    }
+  }
+  return null;
+}

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

@@ -6,10 +6,11 @@ import type { BuilderAnimation } from '../types/builder-block';
 import type { BuilderContent } from '../types/builder-content';
 import type { Dictionary } from '../types/typescript';
 import { logger } from './logger';
+export type EditType = 'client' | 'server' | undefined;
 type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
   callbacks: {
-    contentUpdate: (updatedContent: BuilderContent) => void;
-    stateUpdate: (newState: Dictionary<string>) => void;
+    contentUpdate: (updatedContent: BuilderContent, editType?: EditType) => void;
+    stateUpdate: (newState: Dictionary<string>, editType?: EditType) => void;
     animation: (updatedContent: BuilderAnimation) => void;
     configureSdk: (updatedContent: any) => void;
   };
@@ -43,8 +44,9 @@ export const createEditorListener = ({
             const messageContent = data.data;
             const modelName = messageContent.model;
             const newState = messageContent?.state;
+            const editType = messageContent.editType;
             if (modelName === model && newState) {
-              callbacks.stateUpdate(newState);
+              callbacks.stateUpdate(newState, editType);
             }
             break;
           }
@@ -53,8 +55,9 @@ export const createEditorListener = ({
             const messageContent = data.data;
             const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
             const contentData = messageContent.data;
+            const editType = messageContent.editType;
             if (key === model) {
-              callbacks.contentUpdate(contentData);
+              callbacks.contentUpdate(contentData, editType);
             }
             break;
           }