@builder.io/sdk-react-native 1.0.31-2 → 1.0.32

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

@@ -1,471 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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
-  };
-}