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

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

@@ -1,96 +0,0 @@
-import { logger } from '../../../helpers/logger';
-import { set } from '../../set';
-import type { ExecutorArgs } from '../helpers';
-import { getFunctionArguments } from '../helpers';
-import Interpreter from './acorn-interpreter';
-const processCode = (code: string) => {
-  return code.split('\n').map(line => {
-    const trimmed = line.trim();
-
-    // this async wrapper doesn't work in JS-interpreter, so we drop it.
-    if (line.includes('__awaiter')) return undefined;
-
-    // we find all state setter expressions and append a call to setRootState afterwards
-    const isStateSetter = trimmed.startsWith('state.');
-    if (!isStateSetter) return line;
-    const [lhs, rhs] = trimmed.split('=');
-    const setStr = lhs.replace('state.', '').trim();
-    const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
-    return `
-  ${line}
-  ${setExpr}
-  `;
-  }).filter(Boolean).join('\n');
-};
-const getJSONValName = (val: string) => val + 'JSON';
-export const runInEdge = ({
-  builder,
-  context,
-  event,
-  rootState,
-  localState,
-  rootSetState,
-  code
-}: ExecutorArgs) => {
-  const state = {
-    ...rootState,
-    ...localState
-  };
-  const properties = getFunctionArguments({
-    builder,
-    context,
-    event,
-    state
-  });
-
-  /**
-   * Deserialize all properties from JSON strings to JS objects
-   */
-  const prependedCode = properties.map(([key]) => {
-    const jsonValName = getJSONValName(key);
-    return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
-  }).join('\n');
-  const cleanedCode = processCode(code);
-  if (cleanedCode === '') {
-    logger.warn('Skipping evaluation of empty code block.');
-    return;
-  }
-  const transformed = `
-function theFunction() {
-  ${prependedCode}
-
-  ${cleanedCode}
-}
-theFunction();
-`;
-  const setRootState = (prop: string, value: any) => {
-    const newState = set(state, prop, value);
-    rootSetState?.(newState);
-  };
-  const initFunc = function (interpreter: any, globalObject: any) {
-    /**
-     * serialize all function args to JSON strings
-     */
-    properties.forEach(([key, val]) => {
-      const jsonVal = JSON.stringify(val);
-      interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
-    });
-
-    /**
-     * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
-     * state property is set. This function will update the state object.
-     */
-    interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
-  };
-  try {
-    const myInterpreter = new Interpreter(transformed, initFunc);
-    myInterpreter.run();
-    const output = myInterpreter.pseudoToNative(myInterpreter.value);
-    return output;
-  } catch (e) {
-    logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
-      e
-    });
-    return;
-  }
-}

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

@@ -1 +0,0 @@
-export { runInEdge as evaluator } from './edge-runtime'

package/src/functions/evaluate/evaluate.ts

@@ -1,76 +0,0 @@
-import { logger } from '../../helpers/logger';
-import { chooseBrowserOrServerEval } from './choose-eval';
-import type { EvaluatorArgs, ExecutorArgs } from './helpers';
-import { getBuilderGlobals, parseCode } from './helpers';
-type EvalValue = unknown;
-class EvalCache {
-  static cacheLimit = 20;
-  static cache = new Map<string, {
-    value: EvalValue;
-  } | undefined>();
-  static getCacheKey(args: ExecutorArgs) {
-    return JSON.stringify({
-      ...args,
-      // replace the event with a random number to break cache
-      // thats because we can't serialize the event object due to circular refs in DOM node refs.
-      event: args.event ? Math.random() : undefined
-    });
-  }
-  static getCachedValue(key: string) {
-    const cachedVal = EvalCache.cache.get(key);
-    return cachedVal;
-  }
-  static setCachedValue(key: string, value: EvalValue) {
-    if (EvalCache.cache.size > 20) {
-      EvalCache.cache.delete(EvalCache.cache.keys().next().value);
-    }
-    EvalCache.cache.set(key, {
-      value
-    });
-  }
-}
-export function evaluate({
-  code,
-  context,
-  localState,
-  rootState,
-  rootSetState,
-  event,
-  isExpression = true,
-  enableCache
-}: EvaluatorArgs): EvalValue {
-  if (code === '') {
-    return undefined;
-  }
-  const args: ExecutorArgs = {
-    code: parseCode(code, {
-      isExpression
-    }),
-    builder: getBuilderGlobals(),
-    context,
-    event,
-    rootSetState,
-    rootState,
-    localState
-  };
-  if (enableCache) {
-    const cacheKey = EvalCache.getCacheKey(args);
-    const cachedValue = EvalCache.getCachedValue(cacheKey);
-    if (cachedValue) {
-      return cachedValue.value;
-    }
-  }
-  try {
-    const newEval = chooseBrowserOrServerEval(args);
-    if (enableCache) {
-      const cacheKey = EvalCache.getCacheKey(args);
-      EvalCache.setCachedValue(cacheKey, newEval);
-    }
-    return newEval;
-  } catch (e: any) {
-    logger.error('Failed code evaluation: ' + e.message, {
-      code
-    });
-    return undefined;
-  }
-}

package/src/functions/evaluate/helpers.ts

@@ -1,56 +0,0 @@
-import type { BuilderContextInterface, BuilderRenderState } from '../../context/types';
-import { isBrowser } from '../is-browser';
-import { isEditing } from '../is-editing';
-import { getUserAttributes } from '../track/helpers';
-export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
-  event?: Event;
-  isExpression?: boolean;
-  enableCache: boolean;
-};
-export type BuilderGlobals = {
-  isEditing: boolean | undefined;
-  isBrowser: boolean | undefined;
-  isServer: boolean | undefined;
-  getUserAttributes: typeof getUserAttributes;
-};
-export type ExecutorArgs = Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'> & {
-  code: string;
-  builder: BuilderGlobals;
-  event: Event | undefined;
-};
-export type Executor = (args: ExecutorArgs) => any;
-export type FunctionArguments = ReturnType<typeof getFunctionArguments>;
-export const getFunctionArguments = ({
-  builder,
-  context,
-  event,
-  state
-}: Pick<ExecutorArgs, 'builder' | 'context' | 'event'> & {
-  state: BuilderRenderState;
-}) => {
-  return Object.entries({
-    state,
-    Builder: builder,
-    // legacy
-    builder,
-    context,
-    event
-  });
-};
-export const getBuilderGlobals = (): BuilderGlobals => ({
-  isEditing: isEditing(),
-  isBrowser: isBrowser(),
-  isServer: !isBrowser(),
-  getUserAttributes: () => getUserAttributes()
-});
-export const parseCode = (code: string, {
-  isExpression = true
-}: Pick<EvaluatorArgs, 'isExpression'>) => {
-  // Be able to handle simple expressions like "state.foo" or "1 + 1"
-  // as well as full blocks like "var foo = "bar"; return foo"
-  const useReturn =
-  // we disable this for cases where we definitely don't want a return
-  isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
-  const useCode = useReturn ? `return (${code});` : code;
-  return useCode;
-}

package/src/functions/evaluate/index.ts

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

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

@@ -1 +0,0 @@
-export { runInNode as evaluator } from './node-runtime'

package/src/functions/evaluate/node-runtime/init.ts

@@ -1,33 +0,0 @@
-/**
- * This file:
- * - imports `isolated-vm`, which can only be made from a file that never runs
- * on the client (e.g. Next's `_document.tsx`)
- * - stores the ivm instance in a global variable using `setIvm`
- *
- * This is needed for when bundlers/meta-frameworks are not able to reliably
- * import the `isolated-vm` package using our `safeDynamicRequire` trick.
- *
- * The `isolated-vm` import must exist in this separate file, or it will end up
- * in the SDK's main entry point, causing errors for users.
- */
-import ivm from 'isolated-vm';
-import { setIvm } from './node-runtime';
-import type { IsolateOptions } from 'isolated-vm';
-
-/**
- * This function initializes the SDK on a Node server. It handles importing the
- * `isolated-vm` package which is needed for dynamic bindings.
- *
- * NOTE: this function cannot be called on the client. You must call this function
- * from a server-only location, such as:
- * - The NextJS Pages router's `_document.tsx`
- * - Your Remix route's `loader`
- */
-export const initializeNodeRuntime = (args?: {
-  ivmIsolateOptions?: IsolateOptions;
-}) => {
-  const {
-    ivmIsolateOptions
-  } = args || {};
-  setIvm(ivm, ivmIsolateOptions);
-}

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

@@ -1,176 +0,0 @@
-import type { Context, IsolateOptions } from 'isolated-vm';
-import { MSG_PREFIX, logger } from '../../../helpers/logger';
-import { fastClone } from '../../fast-clone';
-import { set } from '../../set';
-import type { BuilderGlobals, ExecutorArgs, FunctionArguments } from '../helpers';
-import { getFunctionArguments } from '../helpers';
-import { safeDynamicRequire } from './safeDynamicRequire';
-const getSyncValName = (key: string) => `bldr_${key}_sync`;
-const BUILDER_SET_STATE_NAME = 'BUILDER_SET_STATE';
-const INJECTED_IVM_GLOBAL = 'BUILDER_IVM';
-
-// Convert all argument references to proxies, and pass `copySync` method to target object, to return a copy of the original JS object
-// https://github.com/laverdet/isolated-vm#referencecopysync
-const REF_TO_PROXY_FN = `
-var refToProxy = (obj) => {
-  if (typeof obj !== 'object' || obj === null) {
-    return obj;
-  }
-  return new Proxy({}, {
-    get(target, key) {
-        if (key === 'copySync') {
-          return () => obj.copySync();
-        }
-        const val = obj.getSync(key);
-        if (typeof val?.getSync === 'function') {
-            return refToProxy(val);
-        }
-        return val;
-    },
-    set(target, key, value) {
-        const v = typeof value === 'object' ? new ${INJECTED_IVM_GLOBAL}.Reference(value) : value;
-        obj.setSync(key, v);
-        ${BUILDER_SET_STATE_NAME}(key, value)
-    },
-    deleteProperty(target, key) {
-        obj.deleteSync(key);
-    }
-  })
-}
-`;
-const processCode = ({
-  code,
-  args
-}: {
-  code: string;
-  args: FunctionArguments;
-}) => {
-  const fnArgs = args.map(([name]) => `var ${name} = refToProxy(${getSyncValName(name)}); `).join('');
-
-  // the output is stringified and parsed back to the parent isolate if needed (when it's an `object`)
-  return `
-${REF_TO_PROXY_FN}
-${fnArgs}
-function theFunction() {
-  ${code}
-}
-
-const output = theFunction()
-
-if (typeof output === 'object' && output !== null) {
-  return JSON.stringify(output.copySync ? output.copySync() : output);
-} else {
-  return output;
-}
-`;
-};
-type IsolatedVMImport = typeof import('isolated-vm');
-let IVM_INSTANCE: IsolatedVMImport | null = null;
-let IVM_CONTEXT: Context | null = null;
-
-/**
- * Set the `isolated-vm` instance to be used by the node runtime.
- * This is useful for environments that are not able to rely on our
- * `safeDynamicRequire` trick to import the `isolated-vm` package.
- */
-export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
-  IVM_INSTANCE = ivm;
-  setIsolateContext(options);
-};
-const getIvm = (): IsolatedVMImport => {
-  try {
-    if (IVM_INSTANCE) return IVM_INSTANCE;
-    const dynRequiredIvm = safeDynamicRequire('isolated-vm');
-    if (dynRequiredIvm) return dynRequiredIvm;
-  } catch (error) {
-    logger.error('isolated-vm import error.', error);
-  }
-  throw new Error(`${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on Node server.
-    
-    In certain Node environments, the SDK requires additional initialization steps. This can be achieved by 
-    importing and calling \`initializeNodeRuntime()\` from "@builder.io/sdk-react/node/init". This must be done in
-    a server-only execution path within your application.
-
-    Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
-    `);
-};
-function setIsolateContext(options: IsolateOptions = {
-  memoryLimit: 128
-}) {
-  const ivm = getIvm();
-  const isolate = new ivm.Isolate(options);
-  const context = isolate.createContextSync();
-  const jail = context.global;
-
-  // This makes the global object available in the context as `global`. We use `derefInto()` here
-  // because otherwise `global` would actually be a Reference{} object in the new isolate.
-  jail.setSync('global', jail.derefInto());
-
-  // We will create a basic `log` function for the new isolate to use.
-  jail.setSync('log', function (...logArgs: any[]) {
-    console.log(...logArgs);
-  });
-  jail.setSync(INJECTED_IVM_GLOBAL, ivm);
-  IVM_CONTEXT = context;
-  return context;
-}
-const getIsolateContext = () => {
-  if (IVM_CONTEXT) return IVM_CONTEXT;
-  const context = setIsolateContext();
-  return context;
-};
-export const runInNode = ({
-  code,
-  builder,
-  context,
-  event,
-  localState,
-  rootSetState,
-  rootState
-}: ExecutorArgs) => {
-  const ivm = getIvm();
-  const state = fastClone({
-    ...rootState,
-    ...localState
-  });
-  const args = getFunctionArguments({
-    builder,
-    context,
-    event,
-    state
-  });
-  const isolateContext = getIsolateContext();
-  const jail = isolateContext.global;
-
-  /**
-   * Propagate state changes back to the reactive root state.
-   */
-  jail.setSync(BUILDER_SET_STATE_NAME, function (key: string, value: any) {
-    // mutate the `rootState` object itself. Important for cases where we do not have `rootSetState`
-    // like Qwik.
-    set(rootState, key, value);
-    // call the `rootSetState` function if it exists
-    rootSetState?.(rootState);
-  });
-  args.forEach(([key, arg]) => {
-    const val = typeof arg === 'object' ? new ivm.Reference(
-    // workaround: methods with default values for arguments is not being cloned over
-    key === 'builder' ? {
-      ...arg,
-      getUserAttributes: () => (arg as BuilderGlobals).getUserAttributes()
-    } : arg) : null;
-    jail.setSync(getSyncValName(key), val);
-  });
-  const evalStr = processCode({
-    code,
-    args
-  });
-  const resultStr = isolateContext.evalClosureSync(evalStr);
-  try {
-    // returning objects throw errors in isolated vm, so we stringify it and parse it back
-    const res = JSON.parse(resultStr);
-    return res;
-  } catch (_error: any) {
-    return resultStr;
-  }
-}

package/src/functions/evaluate/node-runtime/safeDynamicRequire.ts

@@ -1,24 +0,0 @@
-const noop = () => {};
-
-/**
- * Allows us to require node-specific code safely within bundlers.
- *
- * https://github.com/laverdet/isolated-vm/issues/423
- *
- * NOTE: this code should only ever run in `node`, and never in an `edge` runtime.
- * This is guaranteed by the fact that each SDK has separate bundles for each runtime.
- * However, it might still end up running in the `browser` if the `node` bundle is loaded in the
- * browser (which happens in many apps' dev mode, and certain other scenarios like Qwik's prod mode).
- * This is why we catch and ignore the error at the very end.
- */
-import { createRequire } from 'node:module';
-export let safeDynamicRequire: typeof require = ((noop as unknown) as typeof require);
-try {
-  safeDynamicRequire = createRequire(import.meta.url);
-} catch (error) {
-  try {
-    safeDynamicRequire = eval('require');
-  } catch (error) {
-    /* empty */
-  }
-}

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

@@ -1,4 +0,0 @@
-import type { ExecutorArgs } from './helpers';
-export const evaluator = (_args: ExecutorArgs) => {
-  throw new Error('Placeholder evaluator not implemented. Make sure the SDK is properly replacing the import to the evaluator with one of edge/node/browser runtime evaluators.');
-}

package/src/functions/evaluate/should-force-browser-runtime-in-node.ts

@@ -1,16 +0,0 @@
-import { logger } from '../../helpers/logger';
-import { isNodeRuntime } from '../is-node-runtime';
-export const shouldForceBrowserRuntimeInNode = () => {
-  if (!isNodeRuntime()) return false;
-  const isArm64 = process.arch === 'arm64';
-  const isNode20 = process.version.startsWith('v20');
-  const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
-  if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-    logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
-    If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
-    See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
-    `);
-    return true;
-  }
-  return false;
-}

package/src/functions/event-handler-name.ts

@@ -1,4 +0,0 @@
-function capitalizeFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-export const getEventHandlerName = (key: string) => `on${capitalizeFirstLetter(key)}`

package/src/functions/extract-text-styles.ts

@@ -1,24 +0,0 @@
-const TEXT_STYLE_KEYS = ['color', 'whiteSpace', 'direction', 'hyphens', 'overflowWrap'];
-
-/**
- * Check if the key represent a CSS style property that applies to text
- * See MDN docs for refrence of what properties apply to text.
- * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#summary
- */
-const isTextStyle = (key: string) => {
-  return TEXT_STYLE_KEYS.includes(key) || key.startsWith('font') || key.startsWith('text') || key.startsWith('letter') || key.startsWith('line') || key.startsWith('word') || key.startsWith('writing');
-};
-
-/**
- * Extract styles that apply to text from a style object.
- */
-export const extractTextStyles = (styles: Partial<CSSStyleDeclaration>) => {
-  const textStyles: Partial<CSSStyleDeclaration> = {};
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Object.entries(styles).forEach(([key, value]: [any, any]) => {
-    if (isTextStyle(key)) {
-      textStyles[key] = value;
-    }
-  });
-  return textStyles;
-}

package/src/functions/fast-clone.ts

@@ -1,4 +0,0 @@
-/**
- * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
- */
-export const fastClone = <T extends object,>(obj: T): T => JSON.parse(JSON.stringify(obj))

package/src/functions/fetch-builder-props.ts

@@ -1,75 +0,0 @@
-import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types';
-import type { Dictionary } from '../types/typescript';
-import { getBuilderSearchParams } from './get-builder-search-params/index';
-import { fetchOneEntry } from './get-content/index';
-import type { GetContentOptions } from './get-content/types';
-type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
-  model?: string;
-}) & ({
-  /**
-   * The current URL path. Used to determine the `urlPath` for targeting content.
-   *
-   * Cannot be used with `url`.
-   */
-  path: string;
-
-  /**
-   * The current URL search params. Used to parse the `searchParams` for targeting content.
-   *
-   * Cannot be used with `url`.
-   */
-  searchParams?: URLSearchParams | Dictionary<string | string[]>;
-  url?: undefined;
-} | {
-  /**
-   * The current URL. Used to determine the `urlPath` for targeting content and
-   * to parse the `searchParams` for targeting content.
-   *
-   * Cannot be used with `path` or `searchParams`.
-   */
-  url: URL;
-  path?: undefined;
-  searchParams?: undefined;
-} | {
-  url?: undefined;
-  path?: undefined;
-  searchParams?: undefined;
-});
-
-/**
- * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
- *
- * @example
- * ```jsx
- * const builderProps = await fetchBuilderProps({
- *    apiKey: 'API_KEY',
- *    // provide `url`
- *    url: yourPageUrl,
- *    // OR provide `path` + `searchParams`
- *    path: yourPath,
- *    searchParams: yourSearchParams,
- * });
- *
- * return <Content {...builderProps} />;
- * ```
- */
-export const fetchBuilderProps = async (_args: GetBuilderPropsOptions): Promise<ContentVariantsPrps> => {
-  const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;
-  const getContentArgs: GetContentOptions = {
-    ..._args,
-    apiKey: _args.apiKey,
-    model: _args.model || 'page',
-    userAttributes: {
-      ..._args.userAttributes,
-      ...(urlPath ? {
-        urlPath
-      } : {})
-    },
-    options: getBuilderSearchParams(_args.searchParams || _args.url?.searchParams || _args.options)
-  };
-  return {
-    apiKey: getContentArgs.apiKey,
-    model: getContentArgs.model,
-    content: await fetchOneEntry(getContentArgs)
-  };
-}

package/src/functions/get-block-actions-handler.ts

@@ -1,17 +0,0 @@
-import type { BuilderContextInterface } from '../context/types';
-import type { BuilderBlock } from '../types/builder-block';
-import { evaluate } from './evaluate/index';
-type Options = {
-  block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>;
-type EventHandler = (event: Event) => any;
-export const createEventHandler = (value: string, options: Options): EventHandler => event => evaluate({
-  code: value,
-  context: options.context,
-  localState: options.localState,
-  rootState: options.rootState,
-  rootSetState: options.rootSetState,
-  event,
-  isExpression: false,
-  enableCache: true
-})

package/src/functions/get-block-actions.ts

@@ -1,35 +0,0 @@
-import { TARGET } from '../constants/target';
-import type { BuilderContextInterface } from '../context/types';
-import type { BuilderBlock } from '../types/builder-block';
-import { getEventHandlerName } from './event-handler-name';
-import { createEventHandler } from './get-block-actions-handler';
-type Actions = {
-  [index: string]: (event: Event) => any;
-};
-export function getBlockActions(options: {
-  block: BuilderBlock;
-  stripPrefix?: boolean;
-} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): Actions {
-  const obj: Actions = {};
-  const optionActions = options.block.actions ?? {};
-  for (const key in optionActions) {
-    // eslint-disable-next-line no-prototype-builtins
-    if (!optionActions.hasOwnProperty(key)) {
-      continue;
-    }
-    const value = optionActions[key];
-    let eventHandlerName = getEventHandlerName(key);
-    if (options.stripPrefix) {
-      switch (TARGET) {
-        case 'vue':
-          eventHandlerName = eventHandlerName.replace('v-on:', '');
-          break;
-        case 'svelte':
-          eventHandlerName = eventHandlerName.replace('on:', '');
-          break;
-      }
-    }
-    obj[eventHandlerName] = createEventHandler(value, options);
-  }
-  return obj;
-}

package/src/functions/get-block-component-options.ts

@@ -1,11 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block';
-export function getBlockComponentOptions(block: BuilderBlock) {
-  return {
-    ...block.component?.options,
-    ...(block as any).options,
-    /**
-     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
-     */
-    builderBlock: block
-  };
-}