@builder.io/sdk-react-native 1.0.32 → 1.0.34

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.34"

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,38 @@
+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>;
+  canTrack?: boolean;
+}

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)