@builder.io/sdk-react-native 1.0.30 → 1.0.31-0

package/src/components/blocks/blocks-wrapper.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+export type BlocksWrapperProps = {
+  blocks: BuilderBlock[] | undefined;
+  parent: string | undefined;
+  path: string | undefined;
+  styleProp: Record<string, any> | undefined;
+  /**
+   * The element that wraps each list of blocks. Defaults to a `div` element ('ScrollView' in React Native).
+   */
+  BlocksWrapper: any;
+  /**
+   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   */
+  BlocksWrapperProps: any;
+  children?: any;
+};
+import { isEditing } from "../../functions/is-editing";
+import type { BuilderBlock } from "../../types/builder-block";
+
+function BlocksWrapper(props: BlocksWrapperProps) {
+  function className() {
+    return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+  }
+
+  function onClick() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        "*"
+      );
+    }
+  }
+
+  function onMouseEnter() {
+    if (isEditing() && !props.blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path,
+          },
+        },
+        "*"
+      );
+    }
+  }
+
+  return (
+    <props.BlocksWrapper
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      {...{
+        dataSet: {
+          class: className(),
+        },
+      }}
+      style={{
+        ...styles.propsBlocksWrapper1,
+        ...props.styleProp,
+      }}
+      onPress={(event) => onClick()}
+      onMouseEnter={(event) => onMouseEnter()}
+      onKeyPress={(event) => onClick()}
+      {...props.BlocksWrapperProps}
+    >
+      {props.children}
+    </props.BlocksWrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  propsBlocksWrapper1: { display: "flex", flexDirection: "column" },
+});
+
+export default BlocksWrapper;

package/src/components/blocks/blocks.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useContext } from "react";
+import BuilderContext from "../../context/builder.context";
+import ComponentsContext from "../../context/components.context";
+import Block from "../block/block";
+import BlocksWrapper from "./blocks-wrapper";
+import type { BlocksProps } from "./blocks.types";
+
+function Blocks(props: BlocksProps) {
+  const builderContext = useContext(BuilderContext);
+
+  const componentsContext = useContext(ComponentsContext);
+
+  return (
+    <BlocksWrapper
+      blocks={props.blocks}
+      parent={props.parent}
+      path={props.path}
+      styleProp={props.styleProp}
+      BlocksWrapper={
+        props.context?.BlocksWrapper || builderContext.BlocksWrapper
+      }
+      BlocksWrapperProps={
+        props.context?.BlocksWrapperProps || builderContext.BlocksWrapperProps
+      }
+    >
+      {props.blocks ? (
+        <>
+          {props.blocks?.map((block) => (
+            <Block
+              key={block.id}
+              block={block}
+              linkComponent={props.linkComponent}
+              context={props.context || builderContext}
+              registeredComponents={
+                props.registeredComponents ||
+                componentsContext.registeredComponents
+              }
+            />
+          ))}
+        </>
+      ) : null}
+    </BlocksWrapper>
+  );
+}
+
+export default Blocks;

package/src/components/blocks/blocks.types.ts

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
+import type { BlocksWrapperProps } from './blocks-wrapper';
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
+  context?: BuilderContextInterface;
+  registeredComponents?: RegisteredComponents;
+  linkComponent?: any;
+}

package/src/components/blocks/index.ts

@@ -0,0 +1 @@
+export { default } from './blocks'

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

@@ -0,0 +1,471 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState, useContext, useRef, useEffect } from "react";
+
+type BuilderEditorProps = Omit<
+  ContentProps,
+  | "customComponents"
+  | "apiVersion"
+  | "isSsrAbTest"
+  | "blocksWrapper"
+  | "blocksWrapperProps"
+  | "isNestedRender"
+> & {
+  builderContextSignal: BuilderContextInterface;
+  setBuilderContextSignal?: (signal: any) => any;
+  children?: any;
+};
+import builderContext from "../../../context/builder.context";
+import type { BuilderContextInterface } from "../../../context/types";
+import { evaluate } from "../../../functions/evaluate/index";
+import { fastClone } from "../../../functions/fast-clone";
+import { fetchOneEntry } from "../../../functions/get-content/index";
+import { fetch } from "../../../functions/get-fetch";
+import { isBrowser } from "../../../functions/is-browser";
+import { isEditing } from "../../../functions/is-editing";
+import { isPreviewing } from "../../../functions/is-previewing";
+import { createRegisterComponentMessage } from "../../../functions/register-component";
+import { _track } from "../../../functions/track/index";
+import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction";
+import { getDefaultCanTrack } from "../../../helpers/canTrack";
+import { logger } from "../../../helpers/logger";
+import { postPreviewContent } from "../../../helpers/preview-lru-cache/set";
+import { createEditorListener } from "../../../helpers/subscribe-to-editor";
+import {
+  registerInsertMenu,
+  setupBrowserForEditing,
+} from "../../../scripts/init-editing";
+import type { BuilderContent } from "../../../types/builder-content";
+import type { ComponentInfo } from "../../../types/components";
+import type { Dictionary } from "../../../types/typescript";
+import { triggerAnimation } from "../../block/animator";
+import DynamicDiv from "../../dynamic-div";
+import type {
+  BuilderComponentStateChange,
+  ContentProps,
+} from "../content.types";
+import { getWrapperClassName } from "./styles.helpers";
+
+function EnableEditor(props: BuilderEditorProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  function mergeNewRootState(newData: Dictionary<any>) {
+    const combinedState = {
+      ...props.builderContextSignal.rootState,
+      ...newData,
+    };
+    if (props.builderContextSignal.rootSetState) {
+      props.builderContextSignal.rootSetState?.(combinedState);
+    } else {
+      props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+        ...PREVIOUS_VALUE,
+        rootState: combinedState,
+      }));
+    }
+  }
+
+  function mergeNewContent(newContent: BuilderContent) {
+    const newContentValue = {
+      ...props.builderContextSignal.content,
+      ...newContent,
+      data: {
+        ...props.builderContextSignal.content?.data,
+        ...newContent?.data,
+      },
+      meta: {
+        ...props.builderContextSignal.content?.meta,
+        ...newContent?.meta,
+        breakpoints:
+          newContent?.meta?.breakpoints ||
+          props.builderContextSignal.content?.meta?.breakpoints,
+      },
+    };
+    props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+      ...PREVIOUS_VALUE,
+      content: newContentValue,
+    }));
+  }
+
+  function showContentProps() {
+    return props.showContent
+      ? {}
+      : {
+          hidden: true,
+          "aria-hidden": true,
+        };
+  }
+
+  const [ContentWrapper, setContentWrapper] = useState(
+    () => props.contentWrapper || ScrollView
+  );
+
+  function processMessage(event: MessageEvent) {
+    return createEditorListener({
+      model: props.model,
+      trustedHosts: props.trustedHosts,
+      callbacks: {
+        configureSdk: (messageContent) => {
+          const { breakpoints, contentId } = messageContent;
+          if (
+            !contentId ||
+            contentId !== props.builderContextSignal.content?.id
+          ) {
+            return;
+          }
+          if (breakpoints) {
+            mergeNewContent({
+              meta: {
+                breakpoints,
+              },
+            });
+          }
+        },
+        animation: (animation) => {
+          triggerAnimation(animation);
+        },
+        contentUpdate: (newContent) => {
+          mergeNewContent(newContent);
+        },
+      },
+    })(event);
+  }
+
+  function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = props.builderContextSignal.content?.data?.jsCode;
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: props.context || {},
+        localState: undefined,
+        rootState: props.builderContextSignal.rootState,
+        rootSetState: props.builderContextSignal.rootSetState,
+        /**
+         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
+         */
+        enableCache: false,
+      });
+    }
+  }
+
+  const [httpReqsData, setHttpReqsData] = useState(() => ({}));
+
+  const [httpReqsPending, setHttpReqsPending] = useState(() => ({}));
+
+  const [clicked, setClicked] = useState(() => false);
+
+  function onClick(event: any) {
+    if (props.builderContextSignal.content) {
+      const variationId = props.builderContextSignal.content?.testVariationId;
+      const contentId = props.builderContextSignal.content?.id;
+      _track({
+        type: "click",
+        canTrack: getDefaultCanTrack(props.canTrack),
+        contentId,
+        apiKey: props.apiKey,
+        variationId: variationId !== contentId ? variationId : undefined,
+        ...getInteractionPropertiesForEvent(event),
+        unique: !clicked,
+      });
+    }
+    if (!clicked) {
+      setClicked(true);
+    }
+  }
+
+  function runHttpRequests() {
+    const requests: {
+      [key: string]: string;
+    } = props.builderContextSignal.content?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (!url) return;
+
+      // request already in progress
+      if (httpReqsPending[key]) return;
+
+      // request already completed, and not in edit mode
+      if (httpReqsData[key] && !isEditing()) return;
+      httpReqsPending[key] = true;
+      const evaluatedUrl = url.replace(/{{([^}]+)}}/g, (_match, group) =>
+        String(
+          evaluate({
+            code: group,
+            context: props.context || {},
+            localState: undefined,
+            rootState: props.builderContextSignal.rootState,
+            rootSetState: props.builderContextSignal.rootSetState,
+            enableCache: true,
+          })
+        )
+      );
+      fetch(evaluatedUrl)
+        .then((response) => response.json())
+        .then((json) => {
+          mergeNewRootState({
+            [key]: json,
+          });
+          httpReqsData[key] = true;
+        })
+        .catch((err) => {
+          console.error("error fetching dynamic data", url, err);
+        })
+        .finally(() => {
+          httpReqsPending[key] = false;
+        });
+    });
+  }
+
+  function emitStateUpdate() {
+    if (isEditing()) {
+      window.dispatchEvent(
+        new CustomEvent<BuilderComponentStateChange>(
+          "builder:component:stateChange",
+          {
+            detail: {
+              state: fastClone(props.builderContextSignal.rootState),
+              ref: {
+                name: props.model,
+              },
+            },
+          }
+        )
+      );
+    }
+  }
+
+  function elementRef_onIniteditingbldr(event) {
+    window.addEventListener("message", processMessage);
+    registerInsertMenu();
+    setupBrowserForEditing({
+      ...(props.locale
+        ? {
+            locale: props.locale,
+          }
+        : {}),
+      ...(props.enrich
+        ? {
+            enrich: props.enrich,
+          }
+        : {}),
+      ...(props.trustedHosts
+        ? {
+            trustedHosts: props.trustedHosts,
+          }
+        : {}),
+    });
+    Object.values<ComponentInfo>(
+      props.builderContextSignal.componentInfos
+    ).forEach((registeredComponent) => {
+      const message = createRegisterComponentMessage(registeredComponent);
+      window.parent?.postMessage(message, "*");
+    });
+    window.addEventListener(
+      "builder:component:stateChangeListenerActivated",
+      emitStateUpdate
+    );
+  }
+
+  function elementRef_onInitpreviewingbldr(event) {
+    const searchParams = new URL(location.href).searchParams;
+    const searchParamPreviewModel = searchParams.get("builder.preview");
+    const searchParamPreviewId = searchParams.get(
+      `builder.overrides.${searchParamPreviewModel}`
+    );
+    const previewApiKey =
+      searchParams.get("apiKey") || searchParams.get("builder.space");
+
+    /**
+     * Make sure that:
+     * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered *  at the same time, e.g. header/page/footer. * - the API key is the same, since we don't want to preview content from other organizations.
+     * - if there is content, that the preview ID is the same as that of the one we receive.
+     *
+     * TO-DO: should we only update the state when there is a change?
+     **/
+    if (
+      searchParamPreviewModel === props.model &&
+      previewApiKey === props.apiKey &&
+      (!props.content || searchParamPreviewId === props.content.id)
+    ) {
+      fetchOneEntry({
+        model: props.model,
+        apiKey: props.apiKey,
+        apiVersion: props.builderContextSignal.apiVersion,
+      }).then((content) => {
+        if (content) {
+          mergeNewContent(content);
+        }
+      });
+    }
+  }
+
+  useEffect(() => {
+    if (isBrowser()) {
+      if (isEditing()) {
+        window.addEventListener("message", processMessage);
+        registerInsertMenu();
+        setupBrowserForEditing({
+          ...(props.locale
+            ? {
+                locale: props.locale,
+              }
+            : {}),
+          ...(props.enrich
+            ? {
+                enrich: props.enrich,
+              }
+            : {}),
+          ...(props.trustedHosts
+            ? {
+                trustedHosts: props.trustedHosts,
+              }
+            : {}),
+        });
+        Object.values<ComponentInfo>(
+          props.builderContextSignal.componentInfos
+        ).forEach((registeredComponent) => {
+          const message = createRegisterComponentMessage(registeredComponent);
+          window.parent?.postMessage(message, "*");
+        });
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
+      }
+      const shouldTrackImpression =
+        props.builderContextSignal.content &&
+        getDefaultCanTrack(props.canTrack);
+      if (shouldTrackImpression) {
+        const variationId = props.builderContextSignal.content?.testVariationId;
+        const contentId = props.builderContextSignal.content?.id;
+        const apiKeyProp = props.apiKey;
+        _track({
+          type: "impression",
+          canTrack: true,
+          contentId,
+          apiKey: apiKeyProp!,
+          variationId: variationId !== contentId ? variationId : undefined,
+        });
+      }
+
+      /**
+       * Override normal content in preview mode.
+       * We ignore this when editing, since the edited content is already being sent from the editor via post messages.
+       */
+      if (isPreviewing() && !isEditing()) {
+        const searchParams = new URL(location.href).searchParams;
+        const searchParamPreviewModel = searchParams.get("builder.preview");
+        const searchParamPreviewId = searchParams.get(
+          `builder.overrides.${searchParamPreviewModel}`
+        );
+        const previewApiKey =
+          searchParams.get("apiKey") || searchParams.get("builder.space");
+
+        /**
+         * Make sure that:
+         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered   *  at the same time, e.g. header/page/footer.   * - the API key is the same, since we don't want to preview content from other organizations.
+         * - if there is content, that the preview ID is the same as that of the one we receive.
+         *
+         * TO-DO: should we only update the state when there is a change?
+         **/
+        if (
+          searchParamPreviewModel === props.model &&
+          previewApiKey === props.apiKey &&
+          (!props.content || searchParamPreviewId === props.content.id)
+        ) {
+          fetchOneEntry({
+            model: props.model,
+            apiKey: props.apiKey,
+            apiVersion: props.builderContextSignal.apiVersion,
+          }).then((content) => {
+            if (content) {
+              mergeNewContent(content);
+            }
+          });
+        }
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (!props.apiKey) {
+      logger.error(
+        "No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      );
+    }
+    evaluateJsCode();
+    runHttpRequests();
+    emitStateUpdate();
+  }, []);
+
+  useEffect(() => {
+    if (props.content) {
+      mergeNewContent(props.content);
+    }
+  }, [props.content]);
+  useEffect(() => {
+    evaluateJsCode();
+  }, [props.builderContextSignal.content?.data?.jsCode]);
+  useEffect(() => {
+    runHttpRequests();
+  }, [props.builderContextSignal.content?.data?.httpRequests]);
+  useEffect(() => {
+    emitStateUpdate();
+  }, [props.builderContextSignal.rootState]);
+  useEffect(() => {
+    if (props.data) {
+      mergeNewRootState(props.data);
+    }
+  }, [props.data]);
+  useEffect(() => {
+    if (props.locale) {
+      mergeNewRootState({
+        locale: props.locale,
+      });
+    }
+  }, [props.locale]);
+
+  useEffect(() => {
+    return () => {
+      if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
+      }
+    };
+  }, []);
+
+  return (
+    <builderContext.Provider value={props.builderContextSignal}>
+      {props.builderContextSignal.content ? (
+        <ContentWrapper
+          {...{}}
+          ref={elementRef}
+          onPress={(event) => onClick(event)}
+          builder-content-id={props.builderContextSignal.content?.id}
+          builder-model={props.model}
+          {...{
+            // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
+            dataSet: {
+              "builder-content-id": "",
+            },
+          }}
+          {...showContentProps()}
+          {...props.contentWrapperProps}
+        >
+          {props.children}
+        </ContentWrapper>
+      ) : null}
+    </builderContext.Provider>
+  );
+}
+
+export default EnableEditor;