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

package/src/components/content-variants/inlined-fns.ts

@@ -0,0 +1,22 @@
+/**
+ * WARNING: This file contains functions that get stringified and inlined into the HTML at build-time.
+ * They cannot import anything.
+ */
+
+type VariantData = {
+  id: string;
+  testRatio?: number;
+};
+
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+
+/**
+ * For more information on how this works,
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ */
+
+export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

package/src/components/dynamic-div.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+export interface DynamicDivProps {
+  children?: any;
+  attributes: any;
+  actionAttributes: any;
+  BlockWrapperProps: any;
+  builderPath: any;
+  builderParentId: any;
+  BlocksWrapperProps: any;
+  contentWrapperProps: any;
+  builderModel: any;
+  ref: any;
+}
+
+function DynamicDiv(props: DynamicDivProps) {
+  return <View>{props.children}</View>;
+}
+
+export default DynamicDiv;

package/src/components/dynamic-renderer/dynamic-renderer.helpers.ts

@@ -0,0 +1,7 @@
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+export const isEmptyElement = (tagName: any): boolean => {
+  return typeof tagName === 'string' && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
+}

package/src/components/dynamic-renderer/dynamic-renderer.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+export interface DynamicRendererProps {
+  children?: any;
+  TagName: any;
+  attributes: any;
+  actionAttributes: any;
+}
+
+import { isEmptyElement } from "./dynamic-renderer.helpers";
+import { setAttrs } from "../../blocks/helpers";
+
+function DynamicRenderer(props: DynamicRendererProps) {
+  return (
+    <>
+      {!isEmptyElement(props.TagName) ? (
+        <>
+          {typeof props.TagName === "string" ? (
+            <props.TagName {...props.attributes} {...props.actionAttributes}>
+              {props.children}
+            </props.TagName>
+          ) : (
+            <props.TagName {...props.attributes} {...props.actionAttributes}>
+              {props.children}
+            </props.TagName>
+          )}
+        </>
+      ) : (
+        <>
+          <props.TagName {...props.attributes} {...props.actionAttributes} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default DynamicRenderer;

package/src/components/error-boundary.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { logger } from '../helpers/logger';
+
+export default class ErrorBoundary extends React.Component<
+  React.PropsWithChildren,
+  { hasError: boolean }
+> {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(_error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logger.error(
+      'ErrorBoundary caught error:',
+      info.error,
+      info.componentStack
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <p>
+          Builder.io SDK: error while rendering block. See console for full
+          logs.
+        </p>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/inlined-script.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface Props {
+  scriptStr: string;
+  id: string;
+}
+
+export default function InlinedScript(_props: Props) {
+  return <React.Fragment></React.Fragment>;
+}

package/src/components/inlined-styles.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface Props {
+  styles: string;
+  id: string;
+}
+
+export default function InlinedStyles(_props: Props) {
+  return <React.Fragment></React.Fragment>;
+}

package/src/constants/builder-registered-components.ts

@@ -0,0 +1,59 @@
+import { componentInfo as accordionComponentInfo } from '../blocks/accordion/component-info';
+import { default as Accordion } from '../blocks/accordion/index';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info';
+import { default as Button } from '../blocks/button/index';
+import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info';
+import { default as Columns } from '../blocks/columns/index';
+import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info';
+import { default as Fragment } from '../blocks/fragment/index';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info';
+import { default as Image } from '../blocks/image/index';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info';
+import { default as Section } from '../blocks/section/index';
+import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info';
+import { default as Slot } from '../blocks/slot/index';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info';
+import { default as Symbol } from '../blocks/symbol/index';
+import { componentInfo as tabsComponentInfo } from '../blocks/tabs/component-info';
+import { default as Tabs } from '../blocks/tabs/index';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info';
+import { default as Text } from '../blocks/text/index';
+import type { RegisteredComponent } from '../context/types';
+import { getExtraComponents } from './extra-components';
+import { TARGET } from './target';
+
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () => [{
+  component: Button,
+  ...buttonComponentInfo
+}, {
+  component: Columns,
+  ...columnsComponentInfo
+}, {
+  component: Fragment,
+  ...fragmentComponentInfo
+}, {
+  component: Image,
+  ...imageComponentInfo
+}, {
+  component: Section,
+  ...sectionComponentInfo
+}, {
+  component: Slot,
+  ...slotComponentInfo
+}, {
+  component: Symbol,
+  ...symbolComponentInfo
+}, {
+  component: Text,
+  ...textComponentInfo
+}, ...(TARGET === 'rsc' ? [] : [{
+  component: Tabs,
+  ...tabsComponentInfo
+}, {
+  component: Accordion,
+  ...accordionComponentInfo
+}]), ...getExtraComponents()]

package/src/constants/device-sizes.ts

@@ -0,0 +1,59 @@
+import { fastClone } from '../functions/fast-clone';
+export type SizeName = 'large' | 'medium' | 'small';
+interface Size {
+  min: number;
+  default: number;
+  max: number;
+}
+const SIZES: Record<SizeName, Size> = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+};
+export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+interface Breakpoints {
+  small?: number;
+  medium?: number;
+}
+export const getSizesForBreakpoints = ({
+  small,
+  medium
+}: Breakpoints) => {
+  const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+
+  if (!small || !medium) {
+    return newSizes;
+  }
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1
+  };
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1
+  };
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2000,
+    // TODO: decide upper limit
+    min: largeMin,
+    default: largeMin + 1
+  };
+  return newSizes;
+}

package/src/constants/extra-components.ts

@@ -0,0 +1 @@
+export const getExtraComponents = () => [];

package/src/constants/sdk-version.ts

@@ -0,0 +1 @@
+export const SDK_VERSION = "1.0.29"

package/src/constants/target.ts

@@ -0,0 +1,3 @@
+type Target = import('../types/targets').Target;
+
+export const TARGET = 'reactNative' as Target;

package/src/context/builder.context.ts

@@ -0,0 +1,15 @@
+import { createContext } from "react";
+
+export default createContext<any>({
+  content: null,
+  context: {},
+  localState: undefined,
+  rootSetState() {},
+  rootState: {},
+  apiKey: null,
+  apiVersion: undefined,
+  componentInfos: {},
+  inheritedStyles: {},
+  BlocksWrapper: "div",
+  BlocksWrapperProps: {},
+});

package/src/context/components.context.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext<any>({ registeredComponents: {} });

package/src/context/index.ts

@@ -0,0 +1 @@
+export { default as BuilderContext } from './builder.context'

package/src/context/types.ts

@@ -0,0 +1,37 @@
+import type { BlocksWrapperProps } from '../components/blocks/blocks-wrapper';
+import type { ApiVersion } from '../types/api-version';
+import type { BuilderContent } from '../types/builder-content';
+import type { ComponentInfo } from '../types/components';
+import type { Dictionary, Nullable } from '../types/typescript';
+export type RegisteredComponent = ComponentInfo & {
+  component: any;
+};
+export type RegisteredComponents = Dictionary<RegisteredComponent>;
+export type BuilderRenderState = Record<string, unknown>;
+export type BuilderRenderContext = Record<string, unknown>;
+export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'> {
+  content: Nullable<BuilderContent>;
+  context: BuilderRenderContext;
+  /**
+   * The state of the application.
+   *
+   * NOTE: see `localState` below to understand how it is different from `rootState`.
+   */
+  rootState: BuilderRenderState;
+  /**
+   * Some frameworks have a `setState` function which needs to be invoked to notify
+   * the framework of state change. (other frameworks don't in which case it is `undefined')
+   */
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+  /**
+   * The local state of the current component. This is different from `rootState` in that
+   * it can be a child state created by a repeater containing local state.
+   * The `rootState` is where all of the state mutations are actually stored.
+   */
+  localState: BuilderRenderState | undefined;
+  apiKey: string | null;
+  apiVersion: ApiVersion | undefined;
+  componentInfos: Dictionary<ComponentInfo>;
+  // Used to recursively store all CSS coming from a parent that would apply to a Text block
+  inheritedStyles: Record<string, unknown>;
+}

package/src/functions/apply-patch-with-mutation.ts

@@ -0,0 +1,61 @@
+export type Patch = {
+  path: string;
+  op: 'add' | 'remove' | 'replace';
+  value: any;
+};
+export const applyPatchWithMinimalMutationChain = <T extends object,>(obj: T, patch: {
+  path: string;
+  op: 'add' | 'remove' | 'replace';
+  value: any;
+}, preserveRoot = false): T => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const {
+    path,
+    op,
+    value
+  } = patch;
+  const pathArr: string[] = path.split(/\//);
+  if (pathArr[0] === '') {
+    pathArr.shift();
+  }
+  const newObj = preserveRoot ? obj : {
+    ...obj
+  };
+  let objPart = (newObj as any);
+  for (let i = 0; i < pathArr.length; i++) {
+    const isLast = i === pathArr.length - 1;
+    const property = pathArr[i];
+    if (isLast) {
+      if (op === 'replace') {
+        objPart[property] = value;
+      } else if (op === 'add') {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          if (property === '-') {
+            objPart.push(value);
+          } else {
+            objPart.splice(index, 0, value);
+          }
+        } else {
+          objPart[property] = value;
+        }
+      } else if (op === 'remove') {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          objPart.splice(index, 1);
+        } else {
+          delete objPart[property];
+        }
+      }
+    } else {
+      const nextProperty = pathArr[i + 1];
+      const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+      objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : {
+        ...newPart
+      };
+    }
+  }
+  return newObj;
+}

package/src/functions/camel-to-kebab-case.ts

@@ -0,0 +1 @@
+export const camelToKebabCase = (str?: string) => str ? str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase() : ''

package/src/functions/deopt.ts

@@ -0,0 +1,6 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export function deoptSignal<T>(value: T): T {
+  return value;
+}

package/src/functions/evaluate/browser-runtime/browser.ts

@@ -0,0 +1,61 @@
+import type { BuilderRenderState } from '../../../context/types';
+import type { ExecutorArgs } from '../helpers';
+import { getFunctionArguments } from '../helpers';
+export const runInBrowser = ({
+  code,
+  builder,
+  context,
+  event,
+  localState,
+  rootSetState,
+  rootState
+}: ExecutorArgs) => {
+  const functionArgs = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state: flattenState({
+      rootState,
+      localState,
+      rootSetState
+    })
+  });
+  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
+};
+export function flattenState({
+  rootState,
+  localState,
+  rootSetState
+}: {
+  rootState: Record<string | symbol, any>;
+  localState: Record<string | symbol, any> | undefined;
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+}): BuilderRenderState {
+  return new Proxy(rootState, {
+    get: (target, prop) => {
+      if (localState && prop in localState) {
+        return localState[prop];
+      }
+      const val = target[prop];
+      if (typeof val === 'object' && val !== null) {
+        return flattenState({
+          rootState: val,
+          localState: undefined,
+          rootSetState: rootSetState ? subState => {
+            target[prop] = subState;
+            rootSetState(target);
+          } : undefined
+        });
+      }
+      return val;
+    },
+    set: (target, prop, value) => {
+      if (localState && prop in localState) {
+        throw new Error('Writing to local state is not allowed as it is read-only.');
+      }
+      target[prop] = value;
+      rootSetState?.(target);
+      return true;
+    }
+  });
+}

package/src/functions/evaluate/browser-runtime/index.ts

@@ -0,0 +1 @@
+export { runInBrowser as evaluator } from './browser'

package/src/functions/evaluate/choose-eval.ts

@@ -0,0 +1,23 @@
+import { isBrowser } from '../is-browser';
+import { runInBrowser } from './browser-runtime/browser';
+import type { ExecutorArgs } from './helpers';
+
+/**
+ * THIS IS A MAGICAL IMPORT. It is aliased by the build process of every SDK configuration, so that
+ * it points to the correct runtime for that configuration, which are expected to live exactly at:
+ *  - ./browser-runtime/index.js
+ *  - ./node-runtime/index.js
+ *  - ./edge-runtime/index.js
+ *
+ * We have code in `/output-generation` that does this aliasing, and is re-used by each SDK.
+ * Also, each individual `tsconfig.json` aliases this import to the browser runtime so that the
+ * types can be resolved correctly.
+ */
+import { evaluator } from 'placeholder-runtime';
+import { shouldForceBrowserRuntimeInNode } from './should-force-browser-runtime-in-node';
+
+/**
+ * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
+ * end up sending the server runtime code to the browser (most notably in dev mode).
+ */
+export const chooseBrowserOrServerEval = (args: ExecutorArgs) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : evaluator(args)