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

package/vue3/src/functions/track/interaction.ts

@@ -1,63 +0,0 @@
-function round(num: number) {
-  return Math.round(num * 1000) / 1000;
-}
-const findParentElement = (target: HTMLElement, callback: (element: HTMLElement) => boolean, checkElement = true): HTMLElement | null => {
-  if (!(target instanceof HTMLElement)) {
-    return null;
-  }
-  let parent: HTMLElement | null = checkElement ? target : target.parentElement;
-  do {
-    if (!parent) {
-      return null;
-    }
-    const matches = callback(parent);
-    if (matches) {
-      return parent;
-    }
-  } while (parent = parent.parentElement);
-  return null;
-};
-const findBuilderParent = (target: HTMLElement) => findParentElement(target, el => {
-  const id = el.getAttribute('builder-id') || el.id;
-  return Boolean(id?.indexOf('builder-') === 0);
-});
-type Offset = {
-  x: number;
-  y: number;
-};
-const computeOffset = ({
-  event,
-  target
-}: {
-  event: MouseEvent;
-  target: HTMLElement;
-}): Offset => {
-  const targetRect = target.getBoundingClientRect();
-  const xOffset = event.clientX - targetRect.left;
-  const yOffset = event.clientY - targetRect.top;
-  const xRatio = round(xOffset / targetRect.width);
-  const yRatio = round(yOffset / targetRect.height);
-  return {
-    x: xRatio,
-    y: yRatio
-  };
-};
-export const getInteractionPropertiesForEvent = (event: MouseEvent) => {
-  const target = (event.target as HTMLElement | null);
-  const targetBuilderElement = target && findBuilderParent(target);
-  const builderId = targetBuilderElement?.getAttribute('builder-id') || targetBuilderElement?.id;
-  return {
-    targetBuilderElement: builderId || undefined,
-    metadata: {
-      targetOffset: target ? computeOffset({
-        event,
-        target
-      }) : undefined,
-      builderTargetOffset: targetBuilderElement ? computeOffset({
-        event,
-        target: targetBuilderElement
-      }) : undefined,
-      builderElementIndex: targetBuilderElement && builderId ? ([] as Element[]).slice.call(document.getElementsByClassName(builderId)).indexOf(targetBuilderElement) : undefined
-    }
-  };
-}

package/vue3/src/functions/transform-block-properties.ts

@@ -1,18 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-
-function classStringToObject(str: string) {
-  const obj = {};
-  if (typeof str !== 'string') {
-    return obj;
-  }
-  const classNames = str.trim().split(/\\s+/);
-  for (const name of classNames) {
-    obj[name] = true;
-  }
-  return obj;
-}
-
-export function transformBlockProperties(block: BuilderBlock) {
-  block.class = classStringToObject(block.class);
-  return block;
-}

package/vue3/src/functions/transform-block.ts

@@ -1,6 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-
-// Noope way for targets to make modifications to the block object if/as needed
-export function transformBlock(block: BuilderBlock): BuilderBlock {
-  return block;
-}

package/vue3/src/helpers/ab-tests.ts

@@ -1,166 +0,0 @@
-import type { CanTrack } from '../types/can-track.js';
-import { getCookie, getCookieSync, setCookie } from './cookie.js';
-import type { BuilderContent, BuilderContentVariation } from '../types/builder-content.js';
-import type { Nullable, Overwrite } from '../types/typescript.js';
-import { checkIsDefined } from '../helpers/nullable.js';
-import { logger } from './logger.js';
-import { TARGET } from '../constants/target.js';
-const BUILDER_STORE_PREFIX = 'builder.tests';
-const getContentTestKey = (id: string) => `${BUILDER_STORE_PREFIX}.${id}`;
-const getContentVariationCookie = ({
-  contentId
-}: {
-  contentId: string;
-}) => getCookie({
-  name: getContentTestKey(contentId),
-  canTrack: true
-});
-const getContentVariationCookieSync = ({
-  contentId
-}: {
-  contentId: string;
-}) => getCookieSync({
-  name: getContentTestKey(contentId),
-  canTrack: true
-});
-const setContentVariationCookie = ({
-  contentId,
-  value
-}: {
-  contentId: string;
-  value: string;
-}) => setCookie({
-  name: getContentTestKey(contentId),
-  value,
-  canTrack: true
-});
-type BuilderContentWithVariations = Overwrite<BuilderContent, Required<Pick<BuilderContent, 'variations' | 'id'>>>;
-const checkIsBuilderContentWithVariations = (item: BuilderContent): item is BuilderContentWithVariations => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
-
-/**
- * Randomly assign a variation to a user
- */
-const getRandomVariationId = ({
-  id,
-  variations
-}: BuilderContentWithVariations) => {
-  let n = 0;
-  const random = Math.random();
-
-  // loop over variations test ratios, incrementing a counter,
-  // until we find the variation that this user should be assigned to
-  for (const id in variations) {
-    const testRatio = variations[id]?.testRatio;
-    n += testRatio!;
-    if (random < n) {
-      return id;
-    }
-  }
-
-  // the variations array does not include the default variation.
-  // if we arrive here, then it means that the random number fits in the default variation bucket.
-  return id;
-};
-const getAndSetVariantId = (args: BuilderContentWithVariations) => {
-  // if variation not found in storage, assign a random variation to this user
-  const randomVariationId = getRandomVariationId(args);
-
-  // store variation in cookies/storage
-  setContentVariationCookie({
-    contentId: args.id,
-    value: randomVariationId
-  }).catch(err => {
-    logger.error('could not store A/B test variation: ', err);
-  });
-  return randomVariationId;
-};
-type TestFields = {
-  data?: BuilderContentVariation['data'];
-  testVariationId?: string;
-  testVariationName: string;
-};
-const getTestFields = ({
-  item,
-  testGroupId
-}: {
-  item: BuilderContentWithVariations;
-  testGroupId: string;
-}): TestFields => {
-  const variationValue = item.variations[testGroupId];
-  if (testGroupId === item.id ||
-  // handle edge-case where `testGroupId` points to non-existing variation
-  !variationValue) {
-    return {
-      testVariationId: item.id,
-      testVariationName: 'Default'
-    };
-  } else {
-    return {
-      data: variationValue.data,
-      testVariationId: variationValue.id,
-      testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : '')
-    };
-  }
-};
-export const handleABTestingSync = ({
-  item,
-  canTrack
-}: {
-  item: Nullable<BuilderContent>;
-} & CanTrack): Nullable<BuilderContent> => {
-  /**
-   * We cannot SSR in React-Native.
-   */
-  if (TARGET === 'reactNative') return item;
-  if (!canTrack) {
-    return item;
-  }
-  if (!item) {
-    return undefined;
-  }
-  if (!checkIsBuilderContentWithVariations(item)) {
-    return item;
-  }
-  const testGroupId = getContentVariationCookieSync({
-    contentId: item.id
-  }) || getAndSetVariantId({
-    variations: item.variations,
-    id: item.id
-  });
-  const variationValue = getTestFields({
-    item,
-    testGroupId
-  });
-  return {
-    ...item,
-    ...variationValue
-  };
-};
-export const handleABTesting = async ({
-  item,
-  canTrack
-}: {
-  item: BuilderContent;
-} & CanTrack): Promise<BuilderContent> => {
-  if (!canTrack) {
-    return item;
-  }
-  if (!checkIsBuilderContentWithVariations(item)) {
-    return item;
-  }
-  const cookieValue = await getContentVariationCookie({
-    contentId: item.id
-  });
-  const testGroupId = cookieValue || getAndSetVariantId({
-    variations: item.variations,
-    id: item.id
-  });
-  const variationValue = getTestFields({
-    item,
-    testGroupId
-  });
-  return {
-    ...item,
-    ...variationValue
-  };
-}

package/vue3/src/helpers/canTrack.ts

@@ -1,2 +0,0 @@
-import { checkIsDefined } from './nullable.js';
-export const getDefaultCanTrack = (canTrack?: boolean) => checkIsDefined(canTrack) ? canTrack : true

package/vue3/src/helpers/cookie.ts

@@ -1,81 +0,0 @@
-import { isBrowser } from '../functions/is-browser.js';
-import type { CanTrack } from '../types/can-track.js';
-import { logger } from './logger.js';
-import { checkIsDefined } from './nullable.js';
-import { getTopLevelDomain } from './url.js';
-type GetCookieArgs = {
-  name: string;
-} & CanTrack;
-export const getCookieSync = ({
-  name,
-  canTrack
-}: GetCookieArgs): string | undefined => {
-  try {
-    if (!canTrack) {
-      return undefined;
-    }
-
-    /**
-     * Extracted from MDN docs
-     * https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_2_get_a_sample_cookie_named_test2
-     */
-    return document.cookie.split('; ').find(row => row.startsWith(`${name}=`))?.split('=')[1];
-  } catch (err: any) {
-    logger.warn('[COOKIE] GET error: ', err?.message || err);
-    return undefined;
-  }
-};
-/**
- * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
- * The sync version is only safe to use in code blocks that `react-native` is guaranteed not to not run.
- */
-export const getCookie = async (args: GetCookieArgs) => getCookieSync(args);
-type CookieConfiguration = Array<['expires', string] | ['path', '/'] | ['domain', string] | ['secure', ''] | ['SameSite', 'None'] | [string, string] | []>;
-const stringifyCookie = (cookie: CookieConfiguration): string => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join('; ');
-const SECURE_CONFIG: CookieConfiguration = [['secure', ''], ['SameSite', 'None']];
-const createCookieString = ({
-  name,
-  value,
-  expires
-}: {
-  name: string;
-  value: string;
-  expires?: Date;
-}) => {
-  const secure = isBrowser() ? location.protocol === 'https:' : true;
-  const secureObj: CookieConfiguration = secure ? SECURE_CONFIG : [[]];
-
-  // TODO: need to know if secure server side
-  const expiresObj: CookieConfiguration = expires ? [['expires', expires.toUTCString()]] : [[]];
-  const cookieValue: CookieConfiguration = [[name, value], ...expiresObj, ['path', '/'], ['domain', getTopLevelDomain(window.location.hostname)], ...secureObj];
-  const cookie = stringifyCookie(cookieValue);
-  return cookie;
-};
-
-/**
- * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
- */
-export const setCookie = async ({
-  name,
-  value,
-  expires,
-  canTrack
-}: {
-  name: string;
-  value: string;
-  expires?: Date;
-} & CanTrack): Promise<void> => {
-  try {
-    if (!canTrack) {
-      return;
-    }
-    const cookie = createCookieString({
-      name,
-      value,
-      expires
-    });
-    document.cookie = cookie;
-  } catch (err: any) {
-    logger.warn('[COOKIE] SET error: ', err?.message || err);
-  }
-}

package/vue3/src/helpers/css.ts

@@ -1,33 +0,0 @@
-import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
-import { checkIsDefined } from './nullable.js';
-export const convertStyleMapToCSSArray = (style: Partial<CSSStyleDeclaration>): string[] => {
-  const cssProps = Object.entries(style).map(([key, value]) => {
-    if (typeof value === 'string') {
-      return `${camelToKebabCase(key)}: ${value};`;
-    } else {
-      return undefined;
-    }
-  });
-  return cssProps.filter(checkIsDefined);
-};
-export const convertStyleMapToCSS = (style: Partial<CSSStyleDeclaration>): string => convertStyleMapToCSSArray(style).join('\n');
-export const createCssClass = ({
-  mediaQuery,
-  className,
-  styles
-}: {
-  mediaQuery?: string;
-  className: string;
-  styles: Partial<CSSStyleDeclaration>;
-}) => {
-  const cssClass = `.${className} {
-    ${convertStyleMapToCSS(styles)}
-  }`;
-  if (mediaQuery) {
-    return `${mediaQuery} {
-      ${cssClass}
-    }`;
-  } else {
-    return cssClass;
-  }
-}

package/vue3/src/helpers/flatten.ts

@@ -1,19 +0,0 @@
-/**
- * Convert deep object to a flat object with dots
- *
- * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
- */
-export function flatten<T extends Record<string, any>>(object: T, path: string | null = null, separator = '.'): T {
-  return Object.keys(object).reduce((acc: T, key: string): T => {
-    const value = object[key];
-    const newPath = [path, key].filter(Boolean).join(separator);
-    const isObject = [typeof value === 'object', value !== null, !(Array.isArray(value) && value.length === 0)].every(Boolean);
-    return isObject ? {
-      ...acc,
-      ...flatten(value, newPath, separator)
-    } : {
-      ...acc,
-      [newPath]: value
-    };
-  }, ({} as T));
-}

package/vue3/src/helpers/localStorage.ts

@@ -1,36 +0,0 @@
-import { isBrowser } from '../functions/is-browser.js';
-import type { CanTrack } from '../types/can-track.js';
-import type { Nullable } from './nullable.js';
-const getLocalStorage = () => isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
-export const getLocalStorageItem = ({
-  key,
-  canTrack
-}: {
-  key: string;
-} & CanTrack): Nullable<string> => {
-  try {
-    if (canTrack) {
-      return getLocalStorage()?.getItem(key);
-    }
-    return undefined;
-  } catch (err) {
-    console.debug('[LocalStorage] GET error: ', err);
-    return undefined;
-  }
-};
-export const setLocalStorageItem = ({
-  key,
-  canTrack,
-  value
-}: {
-  key: string;
-  value: string;
-} & CanTrack) => {
-  try {
-    if (canTrack) {
-      getLocalStorage()?.setItem(key, value);
-    }
-  } catch (err) {
-    console.debug('[LocalStorage] SET error: ', err);
-  }
-}

package/vue3/src/helpers/logger.ts

@@ -1,7 +0,0 @@
-const MSG_PREFIX = '[Builder.io]: ';
-export const logger = {
-  log: (...message: any[]) => console.log(MSG_PREFIX, ...message),
-  error: (...message: any[]) => console.error(MSG_PREFIX, ...message),
-  warn: (...message: any[]) => console.warn(MSG_PREFIX, ...message),
-  debug: (...message: any[]) => console.debug(MSG_PREFIX, ...message)
-}

package/vue3/src/helpers/nullable.ts

@@ -1,2 +0,0 @@
-export type Nullable<T> = T | null | undefined;
-export const checkIsDefined = <T,>(maybeT: Nullable<T>): maybeT is T => maybeT !== null && maybeT !== undefined

package/vue3/src/helpers/preview-lru-cache/get.ts

@@ -1,4 +0,0 @@
-import type { BuilderContent } from '../../types/builder-content.js';
-export function getPreviewContent(_searchParams: URLSearchParams): BuilderContent | undefined {
-  return undefined;
-}

package/vue3/src/helpers/preview-lru-cache/init.ts

@@ -1,7 +0,0 @@
-/**
- * This is an LRU cache to hold preview content on the server-side.
- *
- * Note: This logic is only used by the NextJS SDK.
- */
-
-export function init() {}

package/vue3/src/helpers/preview-lru-cache/set.ts

@@ -1,12 +0,0 @@
-import type { BuilderContent } from '../../types/builder-content.js';
-export async function postPreviewContent({
-  key,
-  value
-}: {
-  key: string;
-  value: BuilderContent;
-}) {
-  return {
-    [key]: value
-  };
-}

package/vue3/src/helpers/sessionId.ts

@@ -1,37 +0,0 @@
-import type { CanTrack } from '../types/can-track.js';
-import { getCookie, setCookie } from './cookie.js';
-import { checkIsDefined } from './nullable.js';
-import { uuid } from './uuid.js';
-const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
-export const getSessionId = async ({
-  canTrack
-}: CanTrack): Promise<string | undefined> => {
-  if (!canTrack) {
-    return undefined;
-  }
-  const sessionId = await getCookie({
-    name: SESSION_LOCAL_STORAGE_KEY,
-    canTrack
-  });
-  if (checkIsDefined(sessionId)) {
-    return sessionId;
-  } else {
-    const newSessionId = createSessionId();
-    setSessionId({
-      id: newSessionId,
-      canTrack
-    });
-    return newSessionId;
-  }
-};
-export const createSessionId = () => uuid();
-export const setSessionId = ({
-  id,
-  canTrack
-}: {
-  id: string;
-} & CanTrack) => setCookie({
-  name: SESSION_LOCAL_STORAGE_KEY,
-  value: id,
-  canTrack
-})

package/vue3/src/helpers/time.ts

@@ -1,2 +0,0 @@
-const MINUTE_TO_MILLESECONDS_MULTIPLIER = 60000;
-export const getCurrentDatePlusMinutes = (minutes = 30) => new Date(Date.now() + minutes * MINUTE_TO_MILLESECONDS_MULTIPLIER)

package/vue3/src/helpers/url.ts

@@ -1,15 +0,0 @@
-/**
- * Only gets one level up from hostname
- * wwww.example.com -> example.com
- * www.example.co.uk -> example.co.uk
- */
-export const getTopLevelDomain = (host: string) => {
-  if (host === 'localhost' || host === '127.0.0.1') {
-    return host;
-  }
-  const parts = host.split('.');
-  if (parts.length > 2) {
-    return parts.slice(1).join('.');
-  }
-  return host;
-}

package/vue3/src/helpers/uuid.ts

@@ -1,17 +0,0 @@
-/**
- * @credit https://stackoverflow.com/a/2117523
- */
-export function uuidv4() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = Math.random() * 16 | 0,
-      v = c == 'x' ? r : r & 0x3 | 0x8;
-    return v.toString(16);
-  });
-}
-
-/**
- * Slightly cleaner and smaller UUIDs
- */
-export function uuid() {
-  return uuidv4().replace(/-/g, '');
-}

package/vue3/src/helpers/visitorId.ts

@@ -1,37 +0,0 @@
-import type { CanTrack } from '../types/can-track.js';
-import { getLocalStorageItem, setLocalStorageItem } from './localStorage.js';
-import { checkIsDefined } from './nullable.js';
-import { uuid } from './uuid.js';
-const VISITOR_LOCAL_STORAGE_KEY = 'builderVisitorId';
-export const getVisitorId = ({
-  canTrack
-}: CanTrack): string | undefined => {
-  if (!canTrack) {
-    return undefined;
-  }
-  const visitorId = getLocalStorageItem({
-    key: VISITOR_LOCAL_STORAGE_KEY,
-    canTrack
-  });
-  if (checkIsDefined(visitorId)) {
-    return visitorId;
-  } else {
-    const newVisitorId = createVisitorId();
-    setVisitorId({
-      id: newVisitorId,
-      canTrack
-    });
-    return newVisitorId;
-  }
-};
-export const createVisitorId = () => uuid();
-export const setVisitorId = ({
-  id,
-  canTrack
-}: {
-  id: string;
-} & CanTrack) => setLocalStorageItem({
-  key: VISITOR_LOCAL_STORAGE_KEY,
-  value: id,
-  canTrack
-})

package/vue3/src/index-helpers/blocks-exports.ts

@@ -1,20 +0,0 @@
-export { default as Button } from '../blocks/button/button.vue';
-export { default as Columns } from '../blocks/columns/columns.vue';
-export { default as Fragment } from '../blocks/fragment/fragment.vue';
-export { default as Image } from '../blocks/image/image.vue';
-export { default as Section } from '../blocks/section/section.vue';
-export { default as Symbol } from '../blocks/symbol/symbol.vue';
-export { default as Text } from '../blocks/text/text.vue';
-export { default as Video } from '../blocks/video/video.vue';
-import { default as Blocks } from '../components/blocks/blocks.vue';
-import { default as Content } from '../components/content-variants/content-variants.vue';
-export { Blocks, Content };
-
-/**
- * @deprecated Renamed to `Blocks`.
- */
-export const RenderBlocks = Blocks;
-/**
- * @deprecated Renamed to `Content`.
- */
-export const RenderContent = Content

package/vue3/src/index-helpers/top-of-file.ts

@@ -1,4 +0,0 @@
-// no-op
-// this file exists in case a target needs to add logic to the top of the index file in an
-// override.
-export default undefined

package/vue3/src/index.ts

@@ -1,8 +0,0 @@
-export * from './index-helpers/top-of-file.js';
-export * from './index-helpers/blocks-exports.js';
-
-/**
- * We have a separate entry point to the SDKs that guarantees no components are being imported. This is useful
- * for React SDK, which would break in the NextJS App directory because the component imports have `use client` in them.
- */
-export * from './server-index.js'