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

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;

package/src/components/content/components/styles.helpers.ts

@@ -0,0 +1,101 @@
+export interface CustomFont {
+  family?: string;
+  kind?: string;
+  fileUrl?: string;
+  files?: {
+    [key: string]: string;
+  };
+}
+const getCssFromFont = (font: CustomFont) => {
+  // TODO: compute what font sizes are used and only load those.......
+  const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+  const name = family.split(',')[0];
+  const url = font.fileUrl ?? font?.files?.regular;
+  let str = '';
+  if (url && family && name) {
+    str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+  }
+  if (font.files) {
+    for (const weight in font.files) {
+      const isNumber = String(Number(weight)) === weight;
+      if (!isNumber) {
+        continue;
+      }
+      // TODO: maybe limit number loaded
+      const weightUrl = font.files[weight];
+      if (weightUrl && weightUrl !== url) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+      }
+    }
+  }
+  return str;
+};
+export const getFontCss = ({
+  customFonts
+}: {
+  customFonts?: CustomFont[];
+}) => {
+  // TODO: flag for this
+  // if (!this.builder.allowCustomFonts) {
+  //   return '';
+  // }
+  // TODO: separate internal data from external
+  return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
+};
+export const getCss = ({
+  cssCode,
+  contentId
+}: {
+  cssCode?: string;
+  contentId?: string;
+}) => {
+  if (!cssCode) {
+    return '';
+  }
+  if (!contentId) {
+    return cssCode;
+  }
+
+  // Allow using `&` in custom CSS code like @emotion
+  // E.g. `& .foobar { ... }` to scope CSS
+  // TODO: handle if '&' is within a string like `content: "&"`
+  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};
+const DEFAULT_STYLES = `
+.builder-button {
+  all: unset;
+}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`;
+export const getDefaultStyles = (isNested: boolean | undefined) => {
+  return !isNested ? DEFAULT_STYLES : '';
+};
+export const getWrapperClassName = (variationId?: string) => {
+  return `variant-${variationId}`;
+}

package/src/components/content/components/styles.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState } from "react";
+
+interface Props {
+  cssCode?: string;
+  customFonts?: CustomFont[];
+  contentId?: string;
+  isNestedRender?: boolean;
+}
+
+import InlinedStyles from "../../inlined-styles";
+import type { CustomFont } from "./styles.helpers";
+import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers";
+
+function ContentStyles(props: Props) {
+  const [injectedStyles, setInjectedStyles] = useState(() =>
+    `
+${getCss({
+  cssCode: props.cssCode,
+  contentId: props.contentId,
+})}
+${getFontCss({
+  customFonts: props.customFonts,
+})}
+${getDefaultStyles(props.isNestedRender)}
+`.trim()
+  );
+
+  return <InlinedStyles id="builderio-content" styles={injectedStyles} />;
+}
+
+export default ContentStyles;

package/src/components/content/content.helpers.ts

@@ -0,0 +1,40 @@
+import type { BuilderRenderState } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { ContentProps } from './content.types';
+export const getRootStateInitialValue = ({
+  content,
+  data,
+  locale
+}: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+  const defaultValues: BuilderRenderState = {};
+  const initialState = content?.data?.state || {};
+
+  // set default values for content state inputs
+  content?.data?.inputs?.forEach(input => {
+    if (input.name && input.defaultValue !== undefined) {
+      defaultValues[input.name] = input.defaultValue;
+    }
+  });
+  return {
+    ...defaultValues,
+    ...initialState,
+    ...data,
+    ...(locale ? {
+      locale
+    } : {})
+  };
+};
+export const getContentInitialValue = ({
+  content,
+  data
+}: Pick<ContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
+  return !content ? undefined : {
+    ...content,
+    data: {
+      ...content?.data,
+      ...data
+    },
+    meta: content?.meta
+  };
+}