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

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

@@ -0,0 +1,62 @@
+export interface GetContentOptions {
+  /** The model to get content for */
+  model: string;
+
+  /** Your public API key */
+  apiKey: string;
+
+  /** Number of items to fetch. Default is 1 */
+  limit?: number;
+
+  /** User attributes to target on, such as { urlPath: '/foo', device: 'mobile', ...etc } */
+  userAttributes?: (Record<string, string> & {
+    urlPath?: string;
+  }) | null;
+
+  /** Custom query */
+  query?: Record<string, any>;
+
+  /**
+   * Any other API options.
+   * Accepts both a key/value object or a `URLSearchParams` instance
+   * */
+  options?: Record<string, any> | URLSearchParams;
+
+  /**
+   * If set to `true`, it will lazy load symbols/references.
+   * If set to `false`, it will render the entire content tree eagerly.
+   * @deprecated use `enrich` instead
+   */
+  noTraverse?: boolean;
+
+  /**
+   * If set to `false`, it will not use cookies to target content. Therefore, A/B Testing will be disabled and
+   * only the default variation will be returned to every user.
+   *
+   * Defaults to `true`.
+   */
+  canTrack?: boolean;
+
+  /**
+   * Include references in the response. Defaults to `true`.
+   * @deprecated use `enrich` instead
+   */
+  includeRefs?: boolean;
+
+  /**
+   * Include multilevel references in the response.
+   */
+  enrich?: boolean;
+
+  /**
+   * If provided, the API will auto-resolve localized objects to the value of this `locale` key.
+   */
+  locale?: string;
+
+  /**
+   * If provided, sets the Builder API version used to fetch content.
+   *
+   * Defaults to `v3`.
+   */
+  apiVersion?: 'v2' | 'v3';
+}

package/vue2/src/functions/get-fetch.ts

@@ -0,0 +1,11 @@
+import { getGlobalThis } from './get-global-this.js';
+function getFetch(): typeof global.fetch {
+  const globalFetch: typeof global.fetch = getGlobalThis().fetch;
+  if (typeof globalFetch === 'undefined') {
+    console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project. 
+      For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
+    throw new Error('Builder SDK could not find a global `fetch` function');
+  }
+  return globalFetch;
+}
+export const fetch = getFetch()

package/vue2/src/functions/get-global-this.ts

@@ -0,0 +1,16 @@
+type Global = typeof global | typeof window | typeof self | typeof globalThis;
+export function getGlobalThis(): Global {
+  if (typeof globalThis !== 'undefined') {
+    return globalThis;
+  }
+  if (typeof window !== 'undefined') {
+    return window;
+  }
+  if (typeof global !== 'undefined') {
+    return global;
+  }
+  if (typeof self !== 'undefined') {
+    return self;
+  }
+  return globalThis;
+}

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

@@ -0,0 +1,69 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { evaluate } from './evaluate/index.js';
+import { fastClone } from './fast-clone.js';
+import { set } from './set.js';
+import { transformBlock } from './transform-block.js';
+const evaluateBindings = ({
+  block,
+  context,
+  localState,
+  rootState,
+  rootSetState
+}: {
+  block: BuilderBlock;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock => {
+  if (!block.bindings) {
+    return block;
+  }
+  const copy = fastClone(block);
+  const copied = {
+    ...copy,
+    properties: {
+      ...copy.properties
+    },
+    actions: {
+      ...copy.actions
+    }
+  };
+  for (const binding in block.bindings) {
+    const expression = block.bindings[binding];
+    const value = evaluate({
+      code: expression,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
+    set(copied, binding, value);
+  }
+  return copied;
+};
+export function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  localState,
+  rootState,
+  rootSetState
+}: {
+  block: BuilderBlock;
+  /**
+   * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
+   * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
+   */
+  shouldEvaluateBindings: boolean;
+} & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({
+      block: transformedBlock,
+      localState,
+      rootState,
+      rootSetState,
+      context
+    });
+  } else {
+    return transformedBlock;
+  }
+}

package/vue2/src/functions/get-react-native-block-styles.ts

@@ -0,0 +1,27 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { sanitizeReactNativeBlockStyles } from './sanitize-react-native-block-styles.js';
+export function getReactNativeBlockStyles({
+  block,
+  context,
+  blockStyles
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+  blockStyles: any;
+}): CSSStyleDeclaration | Record<string, string | undefined> {
+  const responsiveStyles = block.responsiveStyles;
+  if (!responsiveStyles) {
+    return {};
+  }
+  const styles = ({
+    // recursively apply inherited styles so that they can be passed down to children `Text` blocks
+    ...context.inheritedStyles,
+    ...(responsiveStyles.large || {}),
+    ...(responsiveStyles.medium || {}),
+    ...(responsiveStyles.small || {}),
+    ...blockStyles
+  } as Record<string, string | number>);
+  const newStyles = ((sanitizeReactNativeBlockStyles(styles) as any) as CSSStyleDeclaration);
+  return newStyles;
+}

package/vue2/src/functions/is-browser.ts

@@ -0,0 +1,3 @@
+export function isBrowser(): boolean {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+}

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

@@ -0,0 +1,9 @@
+import { isBrowser } from './is-browser.js';
+
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export function isEdgeRuntime(): boolean {
+  const hasNode = () => typeof process !== 'undefined' && process?.versions?.node;
+  return !isBrowser() && !hasNode();
+}

package/vue2/src/functions/is-editing.ts

@@ -0,0 +1,5 @@
+import { TARGET } from '../constants/target.js';
+import { isIframe } from './is-iframe.js';
+export function isEditing(): boolean {
+  return isIframe() && (TARGET === 'reactNative' || window.location.search.indexOf('builder.frameEditing=') !== -1);
+}

package/vue2/src/functions/is-iframe.ts

@@ -0,0 +1,4 @@
+import { isBrowser } from './is-browser.js';
+export function isIframe(): boolean {
+  return isBrowser() && window.self !== window.top;
+}

package/vue2/src/functions/is-previewing.ts

@@ -0,0 +1,11 @@
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+export function isPreviewing() {
+  if (!isBrowser()) {
+    return false;
+  }
+  if (isEditing()) {
+    return false;
+  }
+  return Boolean(location.search.indexOf('builder.preview=') !== -1);
+}

package/vue2/src/functions/on-change.ts

@@ -0,0 +1,29 @@
+export const onChangeProxySymbol = Symbol('onChangeProxySymbol');
+
+/**
+ * Deeply observe an object and run a callback when it changes
+ *
+ * See ./on-change.test.ts for more info
+ */
+export function onChange<T extends object = any>(obj: T, cb: () => void): T {
+  return new Proxy(obj, {
+    get(target, key) {
+      if (key === onChangeProxySymbol) {
+        return true;
+      }
+      const value = Reflect.get(target, key);
+      if (value && typeof value === 'object') {
+        if ((value as any)[onChangeProxySymbol]) {
+          return value;
+        }
+        return onChange(value, cb);
+      }
+      return value;
+    },
+    set(target, key, value) {
+      const returnValue = Reflect.set(target, key, value);
+      cb();
+      return returnValue;
+    }
+  });
+}

package/vue2/src/functions/register-component.ts

@@ -0,0 +1,48 @@
+import type { RegisteredComponent } from '../context/types.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Input } from '../types/input.js';
+import { fastClone } from './fast-clone.js';
+
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export const components: RegisteredComponent[] = [];
+
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export function registerComponent(component: any, info: ComponentInfo): void {
+  components.push({
+    component,
+    ...info
+  });
+  console.warn('registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.');
+  return component;
+}
+export const createRegisterComponentMessage = (info: ComponentInfo) => ({
+  type: 'builder.registerComponent',
+  data: serializeComponentInfo(info)
+});
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const serializeFn = (fnValue: Function) => {
+  const fnStr = fnValue.toString().trim();
+
+  // we need to account for a few different fn syntaxes:
+  // 1. `function name(args) => {code}`
+  // 2. `name(args) => {code}`
+  // 3. `(args) => {}`
+  const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
+  return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
+};
+const serializeValue = (value: object): any => typeof value === 'function' ? serializeFn(value) : fastClone(value);
+export const serializeComponentInfo = ({
+  inputs,
+  ...info
+}: ComponentInfo): ComponentInfo => ({
+  ...fastClone(info),
+  inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
+    ...acc,
+    [key]: serializeValue(value)
+  }), ({} as Input)))
+})

package/vue2/src/functions/register.ts

@@ -0,0 +1,44 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+import type { DeepPartial } from '../types/deep-partial.js';
+import { isBrowser } from './is-browser.js';
+export interface InsertMenuItem {
+  name: string;
+  icon?: string;
+  item: DeepPartial<BuilderBlock>;
+}
+export interface InsertMenuConfig {
+  name: string;
+  priority?: number;
+  persist?: boolean;
+  advanced?: boolean;
+  items: InsertMenuItem[];
+}
+const registry: {
+  [key: string]: any[];
+} = {};
+export function register(type: 'insertMenu', info: InsertMenuConfig): void;
+export function register(type: string, info: any): void;
+export function register(type: string, info: any) {
+  let typeList = registry[type];
+  if (!typeList) {
+    typeList = registry[type] = [];
+  }
+  typeList.push(info);
+  if (isBrowser()) {
+    const message = {
+      type: 'builder.register',
+      data: {
+        type,
+        info
+      }
+    };
+    try {
+      parent.postMessage(message, '*');
+      if (parent !== window) {
+        window.postMessage(message, '*');
+      }
+    } catch (err) {
+      console.debug('Could not postmessage', err);
+    }
+  }
+}

package/vue2/src/functions/sanitize-react-native-block-styles.ts

@@ -0,0 +1,58 @@
+const propertiesThatMustBeNumber = new Set(['lineHeight']);
+const displayValues = new Set(['flex', 'none']);
+const SHOW_WARNINGS = false;
+type Styles = Record<string, string | number>;
+const normalizeNumber = (value: number): number | undefined => {
+  if (Number.isNaN(value)) {
+    return undefined;
+  } else if (value < 0) {
+    // TODO: why are negative values not allowed?
+    return 0;
+  } else {
+    return value;
+  }
+};
+export const sanitizeReactNativeBlockStyles = (styles: Styles): Styles => {
+  return Object.keys(styles).reduce<Styles>((acc, key): Styles => {
+    const propertyValue = styles[key];
+    if (key === 'display' && !displayValues.has((propertyValue as string))) {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
+      }
+      return acc;
+    }
+    if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== 'number') {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+      }
+      return acc;
+    }
+    if (typeof propertyValue === 'string') {
+      // `px` units need to be stripped and replaced with numbers
+      // https://regexr.com/6ualn
+      const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+      if (isPixelUnit) {
+        const newValue = parseFloat(propertyValue);
+        const normalizedValue = normalizeNumber(newValue);
+        if (normalizedValue) {
+          return {
+            ...acc,
+            [key]: normalizedValue
+          };
+        } else {
+          return acc;
+        }
+      } else if (propertyValue === '0') {
+        // 0 edge case needs to be handled
+        return {
+          ...acc,
+          [key]: 0
+        };
+      }
+    }
+    return {
+      ...acc,
+      [key]: propertyValue
+    };
+  }, {});
+}

package/vue2/src/functions/set-editor-settings.ts

@@ -0,0 +1,15 @@
+import { isBrowser } from './is-browser.js';
+const settings: Settings = {};
+export type Settings = {
+  customInsertMenu?: boolean;
+};
+export function setEditorSettings(newSettings: Settings) {
+  if (isBrowser()) {
+    Object.assign(settings, newSettings);
+    const message = {
+      type: 'builder.settingsChange',
+      data: settings
+    };
+    parent.postMessage(message, '*');
+  }
+}

package/vue2/src/functions/set.ts

@@ -0,0 +1,14 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export const set = (obj: any, _path: string | string[], value: any) => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const path: string[] = Array.isArray(_path) ? _path : (_path.toString().match(/[^.[\]]+/g) as string[]);
+  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+  return obj;
+}

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

@@ -0,0 +1,51 @@
+import { TARGET } from '../../constants/target.js';
+import type { Nullable } from '../../helpers/nullable.js';
+import { isBrowser } from '../is-browser.js';
+const getLocation = (): Nullable<URL> => {
+  if (TARGET === 'reactNative') {
+    return null;
+  } else if (isBrowser()) {
+    const parsedLocation = new URL(location.href);
+
+    // IE11 bug with parsed path being empty string
+    // causes issues with our user targeting
+    if (parsedLocation.pathname === '') {
+      parsedLocation.pathname = '/';
+    }
+    return parsedLocation;
+  } else {
+    console.warn('Cannot get location for tracking in non-browser environment');
+    return null;
+  }
+};
+const getUserAgent = () => typeof navigator === 'object' && navigator.userAgent || '';
+export const getUserAttributes = () => {
+  const userAgent = getUserAgent();
+  const isMobile = {
+    Android() {
+      return userAgent.match(/Android/i);
+    },
+    BlackBerry() {
+      return userAgent.match(/BlackBerry/i);
+    },
+    iOS() {
+      return userAgent.match(/iPhone|iPod/i);
+    },
+    Opera() {
+      return userAgent.match(/Opera Mini/i);
+    },
+    Windows() {
+      return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+    },
+    any() {
+      return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === 'reactNative';
+    }
+  };
+  const isTablet = userAgent.match(/Tablet|iPad/i);
+  const url = getLocation();
+  return {
+    urlPath: url?.pathname,
+    host: url?.host || url?.hostname,
+    device: isTablet ? 'tablet' : isMobile.any() ? 'mobile' : 'desktop'
+  };
+}

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

@@ -0,0 +1,131 @@
+import { TARGET } from '../../constants/target.js';
+import { logger } from '../../helpers/logger.js';
+import { getSessionId } from '../../helpers/sessionId.js';
+import { getVisitorId } from '../../helpers/visitorId.js';
+import type { CanTrack } from '../../types/can-track.js';
+import type { Dictionary } from '../../types/typescript.js';
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from './helpers.js';
+interface Event {
+  /**
+   * The type of your event.
+   *
+   * Examples: `click`, `conversion`, `pageview`, `impression`
+   */
+  type: string;
+  data: {
+    /**
+     * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
+     */
+    contentId?: string;
+    /**
+     * This is the ID of the space that the content belongs to.
+     */
+    ownerId: string;
+    /**
+     * (Optional) metadata that you want to provide with your event.
+     */
+    metadata?: Dictionary<any>;
+    /**
+     * Session ID of the user. This is provided by the SDK by checking session storage.
+     */
+    sessionId: string | undefined;
+    /**
+     * Visitor ID of the user. This is provided by the SDK by checking cookies.
+     */
+    visitorId: string | undefined;
+    /**
+     * (Optional) If running an A/B test, the ID of the variation that the user is in.
+     */
+    variationId?: string;
+    [index: string]: any;
+  };
+}
+type TrackingData = {
+  visitorId: string | undefined;
+  sessionId: string | undefined;
+};
+const getTrackingEventData = async ({
+  canTrack
+}: CanTrack): Promise<TrackingData> => {
+  if (!canTrack) {
+    return {
+      visitorId: undefined,
+      sessionId: undefined
+    };
+  }
+  const sessionId = await getSessionId({
+    canTrack
+  });
+  const visitorId = getVisitorId({
+    canTrack
+  });
+  return {
+    sessionId,
+    visitorId
+  };
+};
+type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
+  /**
+   * Your organization's API key.
+   */
+  apiKey: Event['data']['ownerId'];
+  /**
+   * (Optional) Any additional (non-metadata) properties to add to the event.
+   */
+  [index: string]: any;
+};
+export type EventProps = EventProperties & CanTrack;
+const createEvent = async ({
+  type: eventType,
+  canTrack,
+  apiKey,
+  metadata,
+  ...properties
+}: EventProps): Promise<Event> => ({
+  type: eventType,
+  data: {
+    ...properties,
+    metadata: {
+      url: location.href,
+      ...metadata
+    },
+    ...(await getTrackingEventData({
+      canTrack
+    })),
+    userAttributes: getUserAttributes(),
+    ownerId: apiKey
+  }
+});
+export async function _track(eventProps: EventProps) {
+  if (!eventProps.apiKey) {
+    logger.error('Missing API key for track call. Please provide your API key.');
+    return;
+  }
+  if (!eventProps.canTrack) {
+    return;
+  }
+  if (isEditing()) {
+    return;
+  }
+  if (!(isBrowser() || TARGET === 'reactNative')) {
+    return;
+  }
+  return fetch(`https://cdn.builder.io/api/v1/track`, {
+    method: 'POST',
+    body: JSON.stringify({
+      events: [await createEvent(eventProps)]
+    }),
+    headers: {
+      'content-type': 'application/json'
+    },
+    mode: 'cors'
+  }).catch(err => {
+    console.error('Failed to track: ', err);
+  });
+}
+export const track = (args: EventProperties) => _track({
+  ...args,
+  canTrack: true
+})