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

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

package/src/components/content/content.tsx

@@ -0,0 +1,150 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState, useContext } from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components";
+import { TARGET } from "../../constants/target";
+import ComponentsContext from "../../context/components.context";
+import type {
+  BuilderContextInterface,
+  BuilderRenderState,
+  RegisteredComponents,
+} from "../../context/types";
+import { serializeComponentInfo } from "../../functions/register-component";
+import type { ComponentInfo } from "../../types/components";
+import type { Dictionary } from "../../types/typescript";
+import Blocks from "../blocks/blocks";
+import { getUpdateVariantVisibilityScript } from "../content-variants/helpers";
+import DynamicDiv from "../dynamic-div";
+import InlinedScript from "../inlined-script";
+import EnableEditor from "./components/enable-editor";
+import ContentStyles from "./components/styles";
+import {
+  getContentInitialValue,
+  getRootStateInitialValue,
+} from "./content.helpers";
+import type { ContentProps } from "./content.types";
+import { wrapComponentRef } from "./wrap-component-ref";
+
+function ContentComponent(props: ContentProps) {
+  const [scriptStr, setScriptStr] = useState(() =>
+    getUpdateVariantVisibilityScript({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      variationId: props.content?.testVariationId!,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      contentId: props.content?.id!,
+    })
+  );
+
+  function contentSetState(newRootState: BuilderRenderState) {
+    setBuilderContextSignal((PREVIOUS_VALUE) => ({
+      ...PREVIOUS_VALUE,
+      rootState: newRootState,
+    }));
+  }
+
+  const [registeredComponents, setRegisteredComponents] = useState(() =>
+    [
+      ...getDefaultRegisteredComponents(),
+      ...(props.customComponents || []),
+    ].reduce<RegisteredComponents>(
+      (acc, { component, ...info }) => ({
+        ...acc,
+        [info.name]: {
+          component: component,
+          ...serializeComponentInfo(info),
+        },
+      }),
+      {}
+    )
+  );
+
+  const [builderContextSignal, setBuilderContextSignal] = useState(() => ({
+    content: getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    }),
+    localState: undefined,
+    rootState: getRootStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    }),
+    rootSetState: contentSetState,
+    context: props.context || {},
+    apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
+    componentInfos: [
+      ...getDefaultRegisteredComponents(),
+      ...(props.customComponents || []),
+    ].reduce<Dictionary<ComponentInfo>>(
+      (acc, { component: _, ...info }) => ({
+        ...acc,
+        [info.name]: serializeComponentInfo(info),
+      }),
+      {}
+    ),
+    inheritedStyles: {},
+    BlocksWrapper: props.blocksWrapper || ScrollView,
+    BlocksWrapperProps: props.blocksWrapperProps || {},
+  }));
+
+  return (
+    <ComponentsContext.Provider
+      value={{
+        registeredComponents: registeredComponents,
+      }}
+    >
+      <EnableEditor
+        content={props.content}
+        data={props.data}
+        model={props.model}
+        context={props.context}
+        apiKey={props.apiKey}
+        canTrack={props.canTrack}
+        locale={props.locale}
+        enrich={props.enrich}
+        showContent={props.showContent}
+        builderContextSignal={builderContextSignal}
+        contentWrapper={props.contentWrapper}
+        contentWrapperProps={props.contentWrapperProps}
+        linkComponent={props.linkComponent}
+        trustedHosts={props.trustedHosts}
+        {...{
+          setBuilderContextSignal: setBuilderContextSignal,
+        }}
+      >
+        {props.isSsrAbTest ? (
+          <InlinedScript
+            id="builderio-variant-visibility"
+            scriptStr={scriptStr}
+          />
+        ) : null}
+        {TARGET !== "reactNative" ? (
+          <ContentStyles
+            isNestedRender={props.isNestedRender}
+            contentId={builderContextSignal.content?.id}
+            cssCode={builderContextSignal.content?.data?.cssCode}
+            customFonts={builderContextSignal.content?.data?.customFonts}
+          />
+        ) : null}
+        <Blocks
+          blocks={builderContextSignal.content?.data?.blocks}
+          context={builderContextSignal}
+          registeredComponents={registeredComponents}
+          linkComponent={props.linkComponent}
+        />
+      </EnableEditor>
+    </ComponentsContext.Provider>
+  );
+}
+
+export default ContentComponent;

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

@@ -0,0 +1,13 @@
+import type { BuilderRenderState } from '../../context/types';
+export type { ContentProps } from './contentProps.types';
+export interface BuilderComponentStateChange {
+  state: BuilderRenderState;
+  ref: {
+    name?: string;
+    props?: {
+      builderBlock?: {
+        id?: string;
+      };
+    };
+  };
+}

package/src/components/content/contentProps.types.ts

@@ -0,0 +1,17 @@
+import type { EnforcePartials } from '../../types/enforced-partials';
+import type { ContentVariantsPrps } from '../content-variants/content-variants.types';
+interface InternalRenderProps {
+  showContent: boolean;
+  isSsrAbTest: boolean;
+}
+
+/**
+ * This is in a separate file so that we can override it (most notably in Vue,
+ * where prop types cannot be wrapped by generics like `EnforcePartials`).
+ */
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps> & {
+  /**
+   * For internal use only. Do not provide this prop.
+   */
+  isNestedRender?: boolean;
+}

package/src/components/content/index.ts

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

package/src/components/content/wrap-component-ref.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component: any) => component

package/src/components/content-variants/content-variants.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState, useEffect } from "react";
+
+type VariantsProviderProps = ContentVariantsPrps & {
+  /**
+   * For internal use only. Do not provide this prop.
+   */
+  isNestedRender?: boolean;
+};
+import { TARGET } from "../../constants/target";
+import { handleABTestingSync } from "../../helpers/ab-tests";
+import { getDefaultCanTrack } from "../../helpers/canTrack";
+import ContentComponent from "../content/content";
+import InlinedScript from "../inlined-script";
+import InlinedStyles from "../inlined-styles";
+import type { ContentVariantsPrps } from "./content-variants.types";
+import {
+  checkShouldRenderVariants,
+  getInitVariantsFnsScriptString,
+  getUpdateCookieAndStylesScript,
+  getVariants,
+} from "./helpers";
+
+function ContentVariants(props: VariantsProviderProps) {
+  const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
+    checkShouldRenderVariants({
+      canTrack: getDefaultCanTrack(props.canTrack),
+      content: props.content,
+    })
+  );
+
+  function updateCookieAndStylesScriptStr() {
+    return getUpdateCookieAndStylesScript(
+      getVariants(props.content).map((value) => ({
+        id: value.testVariationId!,
+        testRatio: value.testRatio,
+      })),
+      props.content?.id || ""
+    );
+  }
+
+  function hideVariantsStyleString() {
+    return getVariants(props.content)
+      .map((value) => `.variant-${value.testVariationId} { display: none; } `)
+      .join("");
+  }
+
+  function defaultContent() {
+    return shouldRenderVariants
+      ? {
+          ...props.content,
+          testVariationId: props.content?.id,
+        }
+      : handleABTestingSync({
+          item: props.content,
+          canTrack: getDefaultCanTrack(props.canTrack),
+        });
+  }
+
+  useEffect(() => {
+    /**
+     * For Solid/Svelte: we unmount the non-winning variants post-hydration.
+     */
+  }, []);
+
+  return (
+    <>
+      {!props.isNestedRender && TARGET !== "reactNative" ? (
+        <InlinedScript
+          id="builderio-init-variants-fns"
+          scriptStr={getInitVariantsFnsScriptString()}
+        />
+      ) : null}
+      {shouldRenderVariants ? (
+        <>
+          <InlinedStyles
+            id="builderio-variants"
+            styles={hideVariantsStyleString()}
+          />
+          <InlinedScript
+            id="builderio-variants-visibility"
+            scriptStr={updateCookieAndStylesScriptStr()}
+          />
+          {getVariants(props.content)?.map((variant) => (
+            <ContentComponent
+              isNestedRender={props.isNestedRender}
+              key={variant.testVariationId}
+              content={variant}
+              showContent={false}
+              model={props.model}
+              data={props.data}
+              context={props.context}
+              apiKey={props.apiKey}
+              apiVersion={props.apiVersion}
+              customComponents={props.customComponents}
+              linkComponent={props.linkComponent}
+              canTrack={props.canTrack}
+              locale={props.locale}
+              enrich={props.enrich}
+              isSsrAbTest={shouldRenderVariants}
+              blocksWrapper={props.blocksWrapper}
+              blocksWrapperProps={props.blocksWrapperProps}
+              contentWrapper={props.contentWrapper}
+              contentWrapperProps={props.contentWrapperProps}
+              trustedHosts={props.trustedHosts}
+            />
+          ))}
+        </>
+      ) : null}
+      <ContentComponent
+        isNestedRender={props.isNestedRender}
+        {...{}}
+        content={defaultContent()}
+        showContent
+        model={props.model}
+        data={props.data}
+        context={props.context}
+        apiKey={props.apiKey}
+        apiVersion={props.apiVersion}
+        customComponents={props.customComponents}
+        linkComponent={props.linkComponent}
+        canTrack={props.canTrack}
+        locale={props.locale}
+        enrich={props.enrich}
+        isSsrAbTest={shouldRenderVariants}
+        blocksWrapper={props.blocksWrapper}
+        blocksWrapperProps={props.blocksWrapperProps}
+        contentWrapper={props.contentWrapper}
+        contentWrapperProps={props.contentWrapperProps}
+        trustedHosts={props.trustedHosts}
+      />
+    </>
+  );
+}
+
+export default ContentVariants;

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

@@ -0,0 +1,84 @@
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types';
+import type { ApiVersion } from '../../types/api-version';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+export interface ContentVariantsPrps {
+  /**
+   * The Builder content JSON to render (required).
+   */
+  content?: Nullable<BuilderContent>;
+
+  /**
+   * The Builder content `model` to render (required).
+   */
+  model?: string;
+
+  /**
+   * Additional data to inject into your Builder content (optional).
+   */
+  data?: {
+    [key: string]: any;
+  };
+
+  /**
+   *
+   */
+  context?: BuilderRenderContext;
+
+  /**
+   * Your API Key: needed to enable visual editing, and to dynamically fetch symbols (required).
+   */
+  apiKey: string;
+  apiVersion?: ApiVersion;
+
+  /**
+   * An array of custom components to register (optional).
+   */
+  customComponents?: RegisteredComponent[];
+  /**
+   * The component to use for rendering links. Defaults to anchor element `<a>`.
+   */
+  linkComponent?: any;
+
+  /**
+   * A boolean to enable or disable tracking (optional). Defaults to `true`.
+   */
+  canTrack?: boolean;
+
+  /**
+   * If provided, the API will auto-resolve localized objects to the value of this `locale` key (optional).
+   */
+  locale?: string;
+
+  /**
+   * A boolean to enable or disable enriching API content (optional).
+   *
+   * Enriching will Include multilevel references in the response. Defaults to `false`.
+   */
+  enrich?: boolean;
+
+  /**
+   * The element that wraps your content. Defaults to `<div>` ('ScrollView' in React Native).
+   */
+  contentWrapper?: any;
+
+  /**
+   * Additonal props to pass to `contentWrapper`. Defaults to `{}`.
+   */
+  contentWrapperProps?: any;
+
+  /**
+   * The element that wraps your blocks. Defaults to `<div>` ('ScrollView' in React Native).
+   */
+  blocksWrapper?: any;
+
+  /**
+   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   */
+  blocksWrapperProps?: any;
+
+  /**
+   * List of hosts to allow editing content from.
+   */
+  trustedHosts?: string[];
+}

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

@@ -0,0 +1,72 @@
+import { TARGET } from '../../constants/target';
+import { isBrowser } from '../../functions/is-browser';
+import type { Nullable } from '../../helpers/nullable';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Target } from '../../types/targets';
+import { UPDATE_COOKIES_AND_STYLES_SCRIPT, UPDATE_VARIANT_VISIBILITY_SCRIPT } from './inlined-fns';
+
+/**
+ * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
+ * Some bundlers will minify the fn name, etc.
+ *
+ * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
+ */
+const UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME = 'builderIoAbTest';
+const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'builderIoRenderContent';
+export const getVariants = (content: Nullable<BuilderContent>) => Object.values(content?.variations || {}).map(variant => ({
+  ...variant,
+  testVariationId: variant.id,
+  id: content?.id
+}));
+export const checkShouldRenderVariants = ({
+  canTrack,
+  content
+}: {
+  canTrack: Nullable<boolean>;
+  content: Nullable<BuilderContent>;
+}) => {
+  const hasVariants = getVariants(content).length > 0;
+
+  /**
+   * We cannot SSR in React-Native.
+   */
+  if (TARGET === 'reactNative') return false;
+  if (!hasVariants) return false;
+  if (!canTrack) return false;
+
+  /**
+   * For Vue and Svelte, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+   *
+   * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
+   * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
+   *
+   * NOTE: For Solid/Svelte: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+   * This isn't necessary, just a nice to have.
+   */
+  if (TARGET === 'vue' || TARGET === 'svelte') return true;
+  if (isBrowser()) return false;
+  return true;
+};
+type VariantData = {
+  id: string;
+  testRatio?: number;
+};
+const getIsHydrationTarget = (target: Target) => target === 'react' || target === 'reactNative';
+const isHydrationTarget = getIsHydrationTarget(TARGET);
+export const getInitVariantsFnsScriptString = () => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VARIANT_VISIBILITY_SCRIPT}
+  `;
+export const getUpdateCookieAndStylesScript = (variants: VariantData[], contentId: string) => `
+  window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+  )`;
+export const getUpdateVariantVisibilityScript = ({
+  contentId,
+  variationId
+}: {
+  variationId: string;
+  contentId: string;
+}) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
+    "${variationId}", "${contentId}", ${isHydrationTarget}
+  )`

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

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