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

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

@@ -0,0 +1,63 @@
+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/vue2/src/functions/transform-block-properties.ts

@@ -0,0 +1,18 @@
+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(properties: BuilderBlock) {
+  properties.class = classStringToObject(properties.class);
+  return properties;
+}

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

@@ -0,0 +1,6 @@
+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/vue2/src/helpers/ab-tests.ts

@@ -0,0 +1,166 @@
+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/vue2/src/helpers/canTrack.ts

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

package/vue2/src/helpers/cookie.ts

@@ -0,0 +1,81 @@
+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/vue2/src/helpers/css.ts

@@ -0,0 +1,33 @@
+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/vue2/src/helpers/flatten.ts

@@ -0,0 +1,19 @@
+/**
+ * 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/vue2/src/helpers/localStorage.ts

@@ -0,0 +1,36 @@
+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/vue2/src/helpers/logger.ts

@@ -0,0 +1,7 @@
+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/vue2/src/helpers/nullable.ts

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

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * 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/vue2/src/helpers/preview-lru-cache/set.ts

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

package/vue2/src/helpers/sessionId.ts

@@ -0,0 +1,37 @@
+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/vue2/src/helpers/time.ts

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

package/vue2/src/helpers/url.ts

@@ -0,0 +1,15 @@
+/**
+ * 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/vue2/src/helpers/uuid.ts

@@ -0,0 +1,17 @@
+/**
+ * @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/vue2/src/helpers/visitorId.ts

@@ -0,0 +1,37 @@
+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/vue2/src/index-helpers/blocks-exports.ts

@@ -0,0 +1,20 @@
+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/vue2/src/index-helpers/top-of-file.ts

@@ -0,0 +1,4 @@
+// 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/vue2/src/index.ts

@@ -0,0 +1,8 @@
+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'