@builder.io/sdk-vue 0.6.1-1 → 0.6.1

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

@@ -1,62 +0,0 @@
-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/vue3/src/functions/get-fetch.ts

@@ -1,11 +0,0 @@
-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/vue3/src/functions/get-global-this.ts

@@ -1,16 +0,0 @@
-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/vue3/src/functions/get-processed-block.ts

@@ -1,69 +0,0 @@
-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/vue3/src/functions/get-react-native-block-styles.ts

@@ -1,27 +0,0 @@
-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/vue3/src/functions/is-browser.ts

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

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

@@ -1,9 +0,0 @@
-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/vue3/src/functions/is-editing.ts

@@ -1,5 +0,0 @@
-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/vue3/src/functions/is-iframe.ts

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

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

@@ -1,11 +0,0 @@
-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/vue3/src/functions/on-change.ts

@@ -1,29 +0,0 @@
-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/vue3/src/functions/register-component.ts

@@ -1,48 +0,0 @@
-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/vue3/src/functions/register.ts

@@ -1,44 +0,0 @@
-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/vue3/src/functions/sanitize-react-native-block-styles.ts

@@ -1,58 +0,0 @@
-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/vue3/src/functions/set-editor-settings.ts

@@ -1,15 +0,0 @@
-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/vue3/src/functions/set.ts

@@ -1,14 +0,0 @@
-/**
- * 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/vue3/src/functions/track/helpers.ts

@@ -1,51 +0,0 @@
-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/vue3/src/functions/track/index.ts

@@ -1,131 +0,0 @@
-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
-})