@builder.io/sdk-vue 0.5.9 → 0.6.1-0

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

@@ -0,0 +1,96 @@
+import { logger } from '../../../helpers/logger.js';
+import { set } from '../../set.js';
+import Interpreter from './acorn-interpreter.js';
+import type { ExecutorArgs } from '../helpers.js';
+import { getFunctionArguments } from '../helpers.js';
+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/vue2/src/functions/evaluate/edge-runtime/index.ts

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

package/vue2/src/functions/evaluate/evaluate.ts

@@ -0,0 +1,66 @@
+import { logger } from '../../helpers/logger.js';
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import type { BuilderGlobals, ExecutorArgs } from './helpers.js';
+import { getUserAttributes } from '../track/helpers.js';
+
+/**
+ * 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';
+export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
+  event?: Event;
+  isExpression?: boolean;
+};
+export function evaluate({
+  code,
+  context,
+  localState,
+  rootState,
+  rootSetState,
+  event,
+  isExpression = true
+}: EvaluatorArgs): any {
+  if (code === '') {
+    logger.warn('Skipping evaluation of empty code block.');
+    return;
+  }
+  const builder: BuilderGlobals = {
+    isEditing: isEditing(),
+    isBrowser: isBrowser(),
+    isServer: !isBrowser(),
+    getUserAttributes: () => getUserAttributes()
+  };
+
+  // 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;
+  const args: ExecutorArgs = {
+    code: useCode,
+    builder,
+    context,
+    event,
+    rootSetState,
+    rootState,
+    localState
+  };
+  try {
+    return evaluator(args);
+  } catch (e: any) {
+    logger.error('Failed code evaluation: ' + e.message, {
+      code
+    });
+    return undefined;
+  }
+}

package/vue2/src/functions/evaluate/helpers.ts

@@ -0,0 +1,32 @@
+import type { BuilderContextInterface, BuilderRenderState } from '../../context/types.js';
+import type { getUserAttributes } from '../track/helpers.js';
+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
+  });
+}

package/vue2/src/functions/evaluate/index.ts

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

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

@@ -0,0 +1 @@
+export { evaluator } from '../browser-runtime/index.js'

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

@@ -0,0 +1,4 @@
+import type { ExecutorArgs } from './helpers.js';
+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/vue2/src/functions/event-handler-name.ts

@@ -0,0 +1 @@
+export const getEventHandlerName = (key: string) => `v-on:${key.toLowerCase()}`;

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

@@ -0,0 +1,24 @@
+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/vue2/src/functions/fast-clone.ts

@@ -0,0 +1,4 @@
+/**
+ * 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/vue2/src/functions/fetch-builder-props.ts

@@ -0,0 +1,62 @@
+import { getBuilderSearchParams } from './get-builder-search-params/index.js';
+import type { ContentVariantsPrps } from '../components/content-variants/content-variants.types.js';
+import type { Dictionary } from '../types/typescript.js';
+import { fetchOneEntry } from './get-content/index.js';
+import type { GetContentOptions } from './get-content/types.js';
+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.
+ *
+ */
+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/vue2/src/functions/get-block-actions-handler.ts

@@ -0,0 +1,16 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { evaluate } from './evaluate/index.js';
+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
+})

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

@@ -0,0 +1,36 @@
+import { TARGET } from '../constants/target.js';
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { getEventHandlerName } from './event-handler-name.js';
+import { createEventHandler } from './get-block-actions-handler.js';
+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 'vue2':
+        case 'vue3':
+          eventHandlerName = eventHandlerName.replace('v-on:', '');
+          break;
+        case 'svelte':
+          eventHandlerName = eventHandlerName.replace('on:', '');
+          break;
+      }
+    }
+    obj[eventHandlerName] = createEventHandler(value, options);
+  }
+  return obj;
+}

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

@@ -0,0 +1,11 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+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
+  };
+}

package/vue2/src/functions/get-block-properties.ts

@@ -0,0 +1,82 @@
+import { TARGET } from '../constants/target.js';
+import type { BuilderContextInterface } from '../context/types.js';
+import { convertStyleMapToCSSArray } from '../helpers/css.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { getReactNativeBlockStyles } from './get-react-native-block-styles.js';
+import { transformBlockProperties } from './transform-block-properties.js';
+const extractRelevantRootBlockProperties = (block: BuilderBlock) => {
+  // currently we are only spreading the `href` property
+  // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
+
+  // const {
+  //   '@type': _type,
+  //   '@version': _version,
+  //   id: _id,
+  //   tagName: _tagName,
+  //   layerName: _layerName,
+  //   groupLocked: _groupLocked,
+  //   layerLocked: _layerLocked,
+  //   class: _class,
+  //   children: _children,
+  //   responsiveStyles: _responsiveStyles,
+  //   component: _component,
+  //   bindings: _bindings,
+  //   meta: _meta,
+  //   actions: _actions,
+  //   properties: _properties,
+  //   code: _code,
+  //   repeat: _repeat,
+  //   animations: _animations,
+  //   style: _style,
+  //   hide: _hide,
+  //   show: _show,
+  //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
+  //   ...remainingBlockProperties
+  // } = block;
+
+  return {
+    href: (block as any).href
+  };
+};
+export function getBlockProperties({
+  block,
+  context
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) {
+  const properties = {
+    ...extractRelevantRootBlockProperties(block),
+    ...block.properties,
+    'builder-id': block.id,
+    style: block.style ? getStyleAttribute(block.style) : undefined,
+    class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
+  };
+  if (TARGET === 'reactNative') {
+    properties.style = getReactNativeBlockStyles({
+      block,
+      context,
+      blockStyles: properties.style
+    });
+  }
+  return transformBlockProperties(properties);
+}
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */
+function getStyleAttribute(style: Partial<CSSStyleDeclaration>): string | Partial<CSSStyleDeclaration> {
+  switch (TARGET) {
+    case 'svelte':
+    case 'vue2':
+    case 'vue3':
+    case 'solid':
+      return convertStyleMapToCSSArray(style).join(' ');
+    case 'qwik':
+    case 'reactNative':
+    case 'react':
+    case 'rsc':
+      return style;
+  }
+}

package/vue2/src/functions/get-builder-search-params/index.ts

@@ -0,0 +1,40 @@
+import { isBrowser } from '../is-browser.js';
+const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
+const BUILDER_OPTIONS_PREFIX = 'options.';
+type QueryObject = Record<string, string | string[]>;
+export const convertSearchParamsToQueryObject = (searchParams: URLSearchParams): QueryObject => {
+  const options: Record<string, string> = {};
+  searchParams.forEach((value, key) => {
+    options[key] = value;
+  });
+  return options;
+};
+
+/**
+ * Receives a `URLSearchParams` object or a regular query object, and returns the subset of query params that are
+ * relevant to the Builder SDK.
+ *
+ * @returns
+ */
+export const getBuilderSearchParams = (_options: QueryObject | URLSearchParams | undefined) => {
+  if (!_options) {
+    return {};
+  }
+  const options = normalizeSearchParams(_options);
+  const newOptions: QueryObject = {};
+  Object.keys(options).forEach(key => {
+    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, '').replace(BUILDER_OPTIONS_PREFIX, '');
+      newOptions[trimmedKey] = options[key];
+    }
+  });
+  return newOptions;
+};
+export const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser()) {
+    return {};
+  }
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(searchParams);
+};
+export const normalizeSearchParams = (searchParams: QueryObject | URLSearchParams): QueryObject => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams

package/vue2/src/functions/get-content/generate-content-url.ts

@@ -0,0 +1,45 @@
+import { flatten } from '../../helpers/flatten.js';
+import { getBuilderSearchParamsFromWindow, normalizeSearchParams } from '../get-builder-search-params/index.js';
+import type { GetContentOptions } from './types.js';
+import { DEFAULT_API_VERSION } from '../../types/api-version.js';
+export const generateContentUrl = (options: GetContentOptions): URL => {
+  const {
+    limit = 30,
+    userAttributes,
+    query,
+    noTraverse = false,
+    model,
+    apiKey,
+    includeRefs = true,
+    enrich,
+    locale,
+    apiVersion = DEFAULT_API_VERSION
+  } = options;
+  if (!apiKey) {
+    throw new Error('Missing API key');
+  }
+  if (!['v2', 'v3'].includes(apiVersion)) {
+    throw new Error(`Invalid apiVersion: expected 'v2' or 'v3', received '${apiVersion}'`);
+  }
+  const url = new URL(`https://cdn.builder.io/api/${apiVersion}/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ''}${enrich ? `&enrich=${enrich}` : ''}`);
+  const queryOptions = {
+    ...getBuilderSearchParamsFromWindow(),
+    ...normalizeSearchParams(options.options || {})
+  };
+  const flattened = flatten(queryOptions);
+  for (const key in flattened) {
+    url.searchParams.set(key, String(flattened[key]));
+  }
+  if (userAttributes) {
+    url.searchParams.set('userAttributes', JSON.stringify(userAttributes));
+  }
+  if (query) {
+    const flattened = flatten({
+      query
+    });
+    for (const key in flattened) {
+      url.searchParams.set(key, JSON.stringify((flattened as any)[key]));
+    }
+  }
+  return url;
+}

package/vue2/src/functions/get-content/index.ts

@@ -0,0 +1,110 @@
+import { TARGET } from '../../constants/target.js';
+import { handleABTesting } from '../../helpers/ab-tests.js';
+import { getDefaultCanTrack } from '../../helpers/canTrack.js';
+import { logger } from '../../helpers/logger.js';
+import { getPreviewContent } from '../../helpers/preview-lru-cache/get.js';
+import type { BuilderContent } from '../../types/builder-content.js';
+import { fetch } from '../get-fetch.js';
+import { isBrowser } from '../is-browser.js';
+import { generateContentUrl } from './generate-content-url.js';
+import type { GetContentOptions } from './types.js';
+const checkContentHasResults = (content: ContentResponse): content is ContentResults => 'results' in content;
+
+/**
+ * Returns a the first entry that matches the given options.
+ */
+export async function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null> {
+  const allContent = await fetchEntries({
+    ...options,
+    limit: 1
+  });
+  if (allContent) {
+    return allContent.results[0] || null;
+  }
+  return null;
+}
+
+/**
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
+ *
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
+ */
+export const getContent = fetchOneEntry;
+type ContentResults = {
+  results: BuilderContent[];
+};
+type ContentResponse = ContentResults | {
+  status: number;
+  message: string;
+};
+const _fetchContent = async (options: GetContentOptions) => {
+  const url = generateContentUrl(options);
+  const res = await fetch(url.href);
+  const content = await (res.json() as Promise<ContentResponse>);
+  return content;
+};
+
+/**
+ * @internal Exported only for testing purposes. Do not use.
+ */
+export const _processContentResult = async (options: GetContentOptions, content: ContentResults, url: URL = generateContentUrl(options)) => {
+  const canTrack = getDefaultCanTrack(options.canTrack);
+  const isPreviewing = url.search.includes(`preview=`);
+  if (TARGET === 'rsc' && isPreviewing) {
+    const newResults: BuilderContent[] = [];
+    for (const item of content.results) {
+      const previewContent = getPreviewContent(url.searchParams);
+      newResults.push(previewContent || item);
+    }
+    content.results = newResults;
+  }
+  if (!canTrack) return content;
+  if (!(isBrowser() || TARGET === 'reactNative')) return content;
+
+  /**
+   * For client-side navigations, it is ideal to handle AB testing at this point instead of using our
+   * complex multi-rendering variants approach, which is only needed for SSR'd content.
+   *
+   * This is also where react-native would handle AB testing.
+   */
+  try {
+    const newResults: BuilderContent[] = [];
+    for (const item of content.results) {
+      newResults.push(await handleABTesting({
+        item,
+        canTrack
+      }));
+    }
+    content.results = newResults;
+  } catch (e) {
+    logger.error('Could not process A/B tests. ', e);
+  }
+  return content;
+};
+
+/**
+ * Returns a paginated array of entries that match the given options.
+ */
+export async function fetchEntries(options: GetContentOptions) {
+  try {
+    const url = generateContentUrl(options);
+    const content = await _fetchContent(options);
+    if (!checkContentHasResults(content)) {
+      logger.error('Error fetching data. ', {
+        url,
+        content,
+        options
+      });
+      return null;
+    }
+    return _processContentResult(options, content);
+  } catch (error) {
+    logger.error('Error fetching data. ', error);
+    return null;
+  }
+}
+
+/**
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
+ */
+export const getAllContent = fetchEntries