@builder.io/sdk-svelte 0.4.4 → 0.5.0

package/src/functions/track/interaction.ts

@@ -1,11 +1,7 @@
 function round(num: number) {
   return Math.round(num * 1000) / 1000;
 }
-const findParentElement = (
-  target: HTMLElement,
-  callback: (element: HTMLElement) => boolean,
-  checkElement = true
-): HTMLElement | null => {
+const findParentElement = (target: HTMLElement, callback: (element: HTMLElement) => boolean, checkElement = true): HTMLElement | null => {
   if (!(target instanceof HTMLElement)) {
     return null;
   }
@@ -14,30 +10,24 @@ const findParentElement = (
     if (!parent) {
       return null;
     }
-
     const matches = callback(parent);
     if (matches) {
       return parent;
     }
-  } while ((parent = parent.parentElement));
-
+  } 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);
-  });
-
+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,
+  target
 }: {
   event: MouseEvent;
   target: HTMLElement;
@@ -45,36 +35,29 @@ const computeOffset = ({
   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,
+    y: yRatio
   };
 };
-
 export const getInteractionPropertiesForEvent = (event: MouseEvent) => {
-  const target = event.target as HTMLElement | null;
+  const target = (event.target as HTMLElement | null);
   const targetBuilderElement = target && findBuilderParent(target);
-  const builderId =
-    targetBuilderElement?.getAttribute('builder-id') ||
-    targetBuilderElement?.id;
-
+  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,
-    },
+      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/src/functions/transform-block-properties.ts

@@ -1,3 +1,3 @@
 export function transformBlockProperties<T>(properties: T) {
   return properties;
-}
+}

package/src/functions/transform-block.ts

@@ -3,4 +3,4 @@ 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/src/helpers/ab-tests.ts

@@ -1,49 +1,48 @@
 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 { 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 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,
+  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;
+}) => 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,
+  variations
 }: BuilderContentWithVariations) => {
   let n = 0;
   const random = Math.random();
@@ -53,7 +52,6 @@ const getRandomVariationId = ({
   for (const id in variations) {
     const testRatio = variations[id]?.testRatio;
     n += testRatio!;
-
     if (random < n) {
       return id;
     }
@@ -63,7 +61,6 @@ const getRandomVariationId = ({
   // 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);
@@ -71,105 +68,99 @@ const getAndSetVariantId = (args: BuilderContentWithVariations) => {
   // store variation in cookies/storage
   setContentVariationCookie({
     contentId: args.id,
-    value: randomVariationId,
-  }).catch((err) => {
+    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,
+  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
-  ) {
+  if (testGroupId === item.id ||
+  // handle edge-case where `testGroupId` points to non-existing variation
+  !variationValue) {
     return {
       testVariationId: item.id,
-      testVariationName: 'Default',
+      testVariationName: 'Default'
     };
   } else {
     return {
       data: variationValue.data,
       testVariationId: variationValue.id,
-      testVariationName:
-        variationValue.name || (variationValue.id === item.id ? 'Default' : ''),
+      testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : '')
     };
   }
 };
-
 export const handleABTestingSync = ({
   item,
-  canTrack,
-}: { item: Nullable<BuilderContent> } & CanTrack): Nullable<BuilderContent> => {
+  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 });
+  const testGroupId = getContentVariationCookieSync({
+    contentId: item.id
+  }) || getAndSetVariantId({
+    variations: item.variations,
+    id: item.id
+  });
+  const variationValue = getTestFields({
+    item,
+    testGroupId
+  });
   return {
     ...item,
-    ...variationValue,
+    ...variationValue
   };
 };
-
 export const handleABTesting = async ({
   item,
-  canTrack,
-}: { item: BuilderContent } & CanTrack): Promise<BuilderContent> => {
+  canTrack
+}: {
+  item: BuilderContent;
+} & CanTrack): Promise<BuilderContent> => {
   if (!canTrack) {
     return item;
   }
-
   if (!checkIsBuilderContentWithVariations(item)) {
     return item;
   }
-
   const cookieValue = await getContentVariationCookie({
-    contentId: item.id,
+    contentId: item.id
+  });
+  const testGroupId = cookieValue || getAndSetVariantId({
+    variations: item.variations,
+    id: item.id
+  });
+  const variationValue = getTestFields({
+    item,
+    testGroupId
   });
-
-  const testGroupId =
-    cookieValue ||
-    getAndSetVariantId({
-      variations: item.variations,
-      id: item.id,
-    });
-
-  const variationValue = getTestFields({ item, testGroupId });
   return {
     ...item,
-    ...variationValue,
+    ...variationValue
   };
-};
+}

package/src/helpers/canTrack.ts

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

package/src/helpers/cookie.ts

@@ -3,14 +3,12 @@ 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,
+  canTrack
 }: GetCookieArgs): string | undefined => {
   try {
     if (!canTrack) {
@@ -21,10 +19,7 @@ export const getCookieSync = ({
      * 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];
+    return document.cookie.split('; ').find(row => row.startsWith(`${name}=`))?.split('=')[1];
   } catch (err: any) {
     logger.warn('[COOKIE] GET error: ', err?.message || err);
     return undefined;
@@ -35,55 +30,25 @@ export const getCookieSync = ({
  * 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'],
-];
-
+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,
+  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 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;
 };
 
@@ -94,7 +59,7 @@ export const setCookie = async ({
   name,
   value,
   expires,
-  canTrack,
+  canTrack
 }: {
   name: string;
   value: string;
@@ -104,9 +69,13 @@ export const setCookie = async ({
     if (!canTrack) {
       return;
     }
-    const cookie = createCookieString({ name, value, expires });
+    const cookie = createCookieString({
+      name,
+      value,
+      expires
+    });
     document.cookie = cookie;
   } catch (err: any) {
     logger.warn('[COOKIE] SET error: ', err?.message || err);
   }
-};
+}

package/src/helpers/css.ts

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

package/src/helpers/flatten.ts

@@ -3,22 +3,17 @@
  *
  * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
  */
-export function flatten<T extends Record<string, any>>(
-  object: T,
-  path: string | null = null,
-  separator = '.'
-): T {
+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);
-}
+    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/src/helpers/localStorage.ts

@@ -1,13 +1,10 @@
 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;
-
+const getLocalStorage = () => isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
 export const getLocalStorageItem = ({
   key,
-  canTrack,
+  canTrack
 }: {
   key: string;
 } & CanTrack): Nullable<string> => {
@@ -21,11 +18,10 @@ export const getLocalStorageItem = ({
     return undefined;
   }
 };
-
 export const setLocalStorageItem = ({
   key,
   canTrack,
-  value,
+  value
 }: {
   key: string;
   value: string;
@@ -37,4 +33,4 @@ export const setLocalStorageItem = ({
   } catch (err) {
     console.debug('[LocalStorage] SET error: ', err);
   }
-};
+}

package/src/helpers/logger.ts

@@ -3,5 +3,5 @@ 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),
-};
+  debug: (...message: any[]) => console.debug(MSG_PREFIX, ...message)
+}

package/src/helpers/nullable.ts

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

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

@@ -0,0 +1,8 @@
+import { getIdFromSearchParams } from './helpers';
+import { init } from './init';
+import type { GlobalWCache } from './types';
+export function getPreviewContent(searchParams: URLSearchParams) {
+  init();
+  const id = getIdFromSearchParams(searchParams);
+  return typeof id === 'string' ? (globalThis as GlobalWCache)._BUILDER_PREVIEW_LRU_CACHE.get(id) : undefined;
+}

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

@@ -0,0 +1,9 @@
+import { logger } from '../logger';
+export const getIdFromSearchParams = (searchParams: URLSearchParams) => {
+  const previewedModel = searchParams.get('preview');
+  const previewedId = searchParams.get('overrides.' + previewedModel);
+  if (!previewedId) {
+    logger.warn('No previewed ID found in search params.');
+  }
+  return previewedId;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * This is an LRU cache to hold preview content on the server-side.
+ *
+ * Note: This logic is only used by the NextJS SDK.
+ */
+
+import { LRUCache } from 'lru-cache';
+import type { GlobalWCache } from './types';
+export function init() {
+  if (!(globalThis as GlobalWCache)._BUILDER_PREVIEW_LRU_CACHE) {
+    (globalThis as GlobalWCache)._BUILDER_PREVIEW_LRU_CACHE = new LRUCache({
+      max: 500,
+      // how long to live in ms
+      ttl: 1000 * 60 * 5
+    });
+  }
+}

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

@@ -0,0 +1,18 @@
+'use server';
+
+import type { BuilderContent } from '../../types/builder-content';
+import { init } from './init';
+import type { GlobalWCache } from './types';
+export async function postPreviewContent({
+  key,
+  value
+}: {
+  key: string;
+  value: BuilderContent;
+}) {
+  init();
+  (globalThis as GlobalWCache)._BUILDER_PREVIEW_LRU_CACHE.set(key, value);
+  return {
+    [key]: value
+  };
+}

package/src/helpers/preview-lru-cache/types.ts

@@ -0,0 +1,12 @@
+/**
+ * This is an LRU cache to hold preview content on the server-side.
+ *
+ * Note: This logic is only used by the NextJS SDK.
+ */
+
+import type { LRUCache } from 'lru-cache';
+import type { BuilderContent } from '../../types/builder-content';
+type BuilderLRUCache = LRUCache<string, BuilderContent>;
+export type GlobalWCache = typeof globalThis & {
+  _BUILDER_PREVIEW_LRU_CACHE: BuilderLRUCache;
+}