@builder.io/sdk-svelte 0.5.9 → 0.6.0

package/lib/edge/functions/track/index.d.ts

@@ -0,0 +1,51 @@
+import type { CanTrack } from '../../types/can-track.js';
+import type { Dictionary } from '../../types/typescript.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 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;
+export declare function _track(eventProps: EventProps): Promise<void | Response>;
+export declare const track: (args: EventProperties) => Promise<void | Response>;
+export {};

package/lib/edge/functions/track/index.js

@@ -0,0 +1,71 @@
+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 { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from './helpers.js';
+const getTrackingEventData = async ({ canTrack }) => {
+    if (!canTrack) {
+        return {
+            visitorId: undefined,
+            sessionId: undefined
+        };
+    }
+    const sessionId = await getSessionId({
+        canTrack
+    });
+    const visitorId = getVisitorId({
+        canTrack
+    });
+    return {
+        sessionId,
+        visitorId
+    };
+};
+const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
+    type: eventType,
+    data: {
+        ...properties,
+        metadata: {
+            url: location.href,
+            ...metadata
+        },
+        ...(await getTrackingEventData({
+            canTrack
+        })),
+        userAttributes: getUserAttributes(),
+        ownerId: apiKey
+    }
+});
+export async function _track(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) => _track({
+    ...args,
+    canTrack: true
+});

package/lib/edge/functions/track/interaction.d.ts

@@ -0,0 +1,13 @@
+type Offset = {
+    x: number;
+    y: number;
+};
+export declare const getInteractionPropertiesForEvent: (event: MouseEvent) => {
+    targetBuilderElement: string | undefined;
+    metadata: {
+        targetOffset: Offset | undefined;
+        builderTargetOffset: Offset | undefined;
+        builderElementIndex: number | undefined;
+    };
+};
+export {};

package/lib/edge/functions/track/interaction.js

@@ -0,0 +1,53 @@
+function round(num) {
+    return Math.round(num * 1000) / 1000;
+}
+const findParentElement = (target, callback, checkElement = true) => {
+    if (!(target instanceof HTMLElement)) {
+        return null;
+    }
+    let parent = 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) => findParentElement(target, el => {
+    const id = el.getAttribute('builder-id') || el.id;
+    return Boolean(id?.indexOf('builder-') === 0);
+});
+const computeOffset = ({ event, target }) => {
+    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) => {
+    const target = event.target;
+    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 ? [].slice.call(document.getElementsByClassName(builderId)).indexOf(targetBuilderElement) : undefined
+        }
+    };
+};

package/lib/edge/functions/transform-block-properties.d.ts

@@ -0,0 +1 @@
+export declare function transformBlockProperties<T>(properties: T): T;

package/lib/edge/functions/transform-block-properties.js

@@ -0,0 +1,3 @@
+export function transformBlockProperties(properties) {
+    return properties;
+}

package/lib/edge/functions/transform-block.d.ts

@@ -0,0 +1,2 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function transformBlock(block: BuilderBlock): BuilderBlock;

package/lib/edge/functions/transform-block.js

@@ -0,0 +1,4 @@
+// Noope way for targets to make modifications to the block object if/as needed
+export function transformBlock(block) {
+    return block;
+}

package/lib/edge/helpers/ab-tests.d.ts

@@ -0,0 +1,9 @@
+import type { CanTrack } from '../types/can-track.js';
+import type { BuilderContent } from '../types/builder-content.js';
+import type { Nullable } from '../types/typescript.js';
+export declare const handleABTestingSync: ({ item, canTrack }: {
+    item: Nullable<BuilderContent>;
+} & CanTrack) => Nullable<BuilderContent>;
+export declare const handleABTesting: ({ item, canTrack }: {
+    item: BuilderContent;
+} & CanTrack) => Promise<BuilderContent>;

package/lib/edge/helpers/ab-tests.js

@@ -0,0 +1,122 @@
+import { getCookie, getCookieSync, setCookie } from './cookie.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) => `${BUILDER_STORE_PREFIX}.${id}`;
+const getContentVariationCookie = ({ contentId }) => getCookie({
+    name: getContentTestKey(contentId),
+    canTrack: true
+});
+const getContentVariationCookieSync = ({ contentId }) => getCookieSync({
+    name: getContentTestKey(contentId),
+    canTrack: true
+});
+const setContentVariationCookie = ({ contentId, value }) => setCookie({
+    name: getContentTestKey(contentId),
+    value,
+    canTrack: true
+});
+const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
+/**
+ * Randomly assign a variation to a user
+ */
+const getRandomVariationId = ({ id, variations }) => {
+    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) => {
+    // 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;
+};
+const getTestFields = ({ item, testGroupId }) => {
+    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 }) => {
+    /**
+     * 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 }) => {
+    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/lib/edge/helpers/canTrack.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultCanTrack: (canTrack?: boolean) => boolean;

package/lib/edge/helpers/canTrack.js

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

package/lib/edge/helpers/cookie.d.ts

@@ -0,0 +1,19 @@
+import type { CanTrack } from '../types/can-track.js';
+type GetCookieArgs = {
+    name: string;
+} & CanTrack;
+export declare const getCookieSync: ({ name, canTrack }: GetCookieArgs) => string | 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 declare const getCookie: (args: GetCookieArgs) => Promise<string | undefined>;
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export declare const setCookie: ({ name, value, expires, canTrack }: {
+    name: string;
+    value: string;
+    expires?: Date | undefined;
+} & CanTrack) => Promise<void>;
+export {};

package/lib/edge/helpers/cookie.js

@@ -0,0 +1,55 @@
+import { isBrowser } from '../functions/is-browser.js';
+import { logger } from './logger.js';
+import { checkIsDefined } from './nullable.js';
+import { getTopLevelDomain } from './url.js';
+export const getCookieSync = ({ name, canTrack }) => {
+    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) {
+        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) => getCookieSync(args);
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join('; ');
+const SECURE_CONFIG = [['secure', ''], ['SameSite', 'None']];
+const createCookieString = ({ name, value, expires }) => {
+    const secure = isBrowser() ? location.protocol === 'https:' : true;
+    const secureObj = secure ? SECURE_CONFIG : [[]];
+    // TODO: need to know if secure server side
+    const expiresObj = expires ? [['expires', expires.toUTCString()]] : [[]];
+    const cookieValue = [[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 }) => {
+    try {
+        if (!canTrack) {
+            return;
+        }
+        const cookie = createCookieString({
+            name,
+            value,
+            expires
+        });
+        document.cookie = cookie;
+    }
+    catch (err) {
+        logger.warn('[COOKIE] SET error: ', err?.message || err);
+    }
+};

package/lib/edge/helpers/css.d.ts

@@ -0,0 +1,7 @@
+export declare const convertStyleMapToCSSArray: (style: Partial<CSSStyleDeclaration>) => string[];
+export declare const convertStyleMapToCSS: (style: Partial<CSSStyleDeclaration>) => string;
+export declare const createCssClass: ({ mediaQuery, className, styles }: {
+    mediaQuery?: string | undefined;
+    className: string;
+    styles: Partial<CSSStyleDeclaration>;
+}) => string;

package/lib/edge/helpers/css.js

@@ -0,0 +1,27 @@
+import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
+import { checkIsDefined } from './nullable.js';
+export const convertStyleMapToCSSArray = (style) => {
+    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) => convertStyleMapToCSSArray(style).join('\n');
+export const createCssClass = ({ mediaQuery, className, styles }) => {
+    const cssClass = `.${className} {
+    ${convertStyleMapToCSS(styles)}
+  }`;
+    if (mediaQuery) {
+        return `${mediaQuery} {
+      ${cssClass}
+    }`;
+    }
+    else {
+        return cssClass;
+    }
+};

package/lib/edge/helpers/flatten.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Convert deep object to a flat object with dots
+ *
+ * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
+ */
+export declare function flatten<T extends Record<string, any>>(object: T, path?: string | null, separator?: string): T;

package/lib/edge/helpers/flatten.js

@@ -0,0 +1,19 @@
+/**
+ * Convert deep object to a flat object with dots
+ *
+ * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
+ */
+export function flatten(object, path = null, separator = '.') {
+    return Object.keys(object).reduce((acc, key) => {
+        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
+        };
+    }, {});
+}

package/lib/edge/helpers/localStorage.d.ts

@@ -0,0 +1,9 @@
+import type { CanTrack } from '../types/can-track.js';
+import type { Nullable } from './nullable.js';
+export declare const getLocalStorageItem: ({ key, canTrack }: {
+    key: string;
+} & CanTrack) => Nullable<string>;
+export declare const setLocalStorageItem: ({ key, canTrack, value }: {
+    key: string;
+    value: string;
+} & CanTrack) => void;

package/lib/edge/helpers/localStorage.js

@@ -0,0 +1,24 @@
+import { isBrowser } from '../functions/is-browser.js';
+const getLocalStorage = () => isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
+export const getLocalStorageItem = ({ key, canTrack }) => {
+    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 }) => {
+    try {
+        if (canTrack) {
+            getLocalStorage()?.setItem(key, value);
+        }
+    }
+    catch (err) {
+        console.debug('[LocalStorage] SET error: ', err);
+    }
+};

package/lib/edge/helpers/logger.d.ts

@@ -0,0 +1,6 @@
+export declare const logger: {
+    log: (...message: any[]) => void;
+    error: (...message: any[]) => void;
+    warn: (...message: any[]) => void;
+    debug: (...message: any[]) => void;
+};

package/lib/edge/helpers/logger.js

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

package/lib/edge/helpers/nullable.d.ts

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

package/lib/edge/helpers/nullable.js

@@ -0,0 +1 @@
+export const checkIsDefined = (maybeT) => maybeT !== null && maybeT !== undefined;

package/lib/edge/helpers/preview-lru-cache/get.d.ts

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

package/lib/edge/helpers/preview-lru-cache/get.js

@@ -0,0 +1,3 @@
+export function getPreviewContent(_searchParams) {
+    return undefined;
+}

package/lib/edge/helpers/preview-lru-cache/helpers.js

@@ -0,0 +1 @@
+"use strict";

package/lib/edge/helpers/preview-lru-cache/init.d.ts

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

package/lib/edge/helpers/preview-lru-cache/init.js

@@ -0,0 +1,6 @@
+/**
+ * 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/lib/edge/helpers/preview-lru-cache/set.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+export declare function postPreviewContent({ key, value }: {
+    key: string;
+    value: BuilderContent;
+}): Promise<{
+    [x: string]: BuilderContent;
+}>;

package/lib/edge/helpers/preview-lru-cache/set.js

@@ -0,0 +1,5 @@
+export async function postPreviewContent({ key, value }) {
+    return {
+        [key]: value
+    };
+}

package/lib/edge/helpers/preview-lru-cache/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/edge/helpers/sessionId.d.ts

@@ -0,0 +1,6 @@
+import type { CanTrack } from '../types/can-track.js';
+export declare const getSessionId: ({ canTrack }: CanTrack) => Promise<string | undefined>;
+export declare const createSessionId: () => string;
+export declare const setSessionId: ({ id, canTrack }: {
+    id: string;
+} & CanTrack) => Promise<void>;

package/lib/edge/helpers/sessionId.js

@@ -0,0 +1,30 @@
+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 }) => {
+    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 }) => setCookie({
+    name: SESSION_LOCAL_STORAGE_KEY,
+    value: id,
+    canTrack
+});

package/lib/edge/helpers/time.d.ts

@@ -0,0 +1 @@
+export declare const getCurrentDatePlusMinutes: (minutes?: number) => Date;

package/lib/edge/helpers/time.js

@@ -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/lib/edge/helpers/url.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Only gets one level up from hostname
+ * wwww.example.com -> example.com
+ * www.example.co.uk -> example.co.uk
+ */
+export declare const getTopLevelDomain: (host: string) => string;