@builder.io/sdk-svelte 0.0.1-9 → 0.0.1

package/package/functions/get-processed-block.test.js

@@ -0,0 +1,32 @@
+import '../types/builder-block.js';
+import { getProcessedBlock } from './get-processed-block.js';
+test('Can process bindings', () => {
+    const block = {
+        '@type': '@builder.io/sdk:Element',
+        properties: {
+            foo: 'bar',
+        },
+        bindings: {
+            'properties.foo': '"baz"',
+            'responsiveStyles.large.zIndex': '1 + 1',
+            'properties.test': 'state.test',
+            'properties.block': `
+        const foo = 'bar';
+        return foo;
+      `,
+            'properties.isEditing': 'builder.isEditing',
+        },
+    };
+    const processed = getProcessedBlock({
+        block,
+        context: {},
+        state: { test: 'hello' },
+        shouldEvaluateBindings: true,
+    });
+    expect(processed).not.toEqual(block);
+    expect(processed.properties?.foo).toEqual('baz');
+    expect(processed.properties?.test).toEqual('hello');
+    expect(processed.properties?.block).toEqual('bar');
+    expect(processed.properties?.isEditing).toEqual(false);
+    expect(processed.responsiveStyles?.large?.zIndex).toEqual(2);
+});

package/package/functions/if-target.d.ts

@@ -0,0 +1,7 @@
+declare type Target = import('../types/targets').Target;
+export declare function ifTarget<A, B>({ targets, doThing, elseThing, }: {
+    targets: Target[];
+    doThing: () => A;
+    elseThing?: () => B;
+}): A | B | undefined;
+export {};

package/package/functions/if-target.js

@@ -0,0 +1,10 @@
+import { TARGET } from '../constants/target.js';
+// TODO: babel compile to include certain code only if the target matches
+export function ifTarget({ targets, doThing, elseThing, }) {
+    if (TARGET && targets.includes(TARGET)) {
+        return doThing();
+    }
+    else {
+        return elseThing?.();
+    }
+}

package/package/functions/is-browser.d.ts

@@ -0,0 +1 @@
+export declare function isBrowser(): boolean;

package/package/functions/is-browser.js

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

package/package/functions/is-editing.d.ts

@@ -0,0 +1 @@
+export declare function isEditing(): boolean;

package/package/functions/is-editing.js

@@ -0,0 +1,4 @@
+import { isIframe } from './is-iframe.js';
+export function isEditing() {
+    return (isIframe() && window.location.search.indexOf('builder.frameEditing=') !== -1);
+}

package/package/functions/is-iframe.d.ts

@@ -0,0 +1 @@
+export declare function isIframe(): boolean;

package/package/functions/is-iframe.js

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

package/package/functions/is-previewing.d.ts

@@ -0,0 +1 @@
+export declare function isPreviewing(): boolean;

package/package/functions/is-previewing.js

@@ -0,0 +1,11 @@
+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/package/functions/mark-mutable.d.ts

@@ -0,0 +1,2 @@
+export declare function markMutable<T = any>(value: T): T;
+export declare function markPropsMutable<T = any>(props: T): T;

package/package/functions/mark-mutable.js

@@ -0,0 +1,6 @@
+export function markMutable(value) {
+    return value;
+}
+export function markPropsMutable(props) {
+    return props;
+}

package/package/functions/on-change.d.ts

@@ -0,0 +1,7 @@
+export declare const onChangeProxySymbol: unique symbol;
+/**
+ * Deeply observe an object and run a callback when it changes
+ *
+ * See ./on-change.test.ts for more info
+ */
+export declare function onChange<T extends object = any>(obj: T, cb: () => void): T;

package/package/functions/on-change.js

@@ -0,0 +1,28 @@
+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(obj, cb) {
+    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[onChangeProxySymbol]) {
+                    return value;
+                }
+                return onChange(value, cb);
+            }
+            return value;
+        },
+        set(target, key, value) {
+            const returnValue = Reflect.set(target, key, value);
+            cb();
+            return returnValue;
+        },
+    });
+}

package/package/functions/on-change.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package/functions/on-change.test.js

@@ -0,0 +1,20 @@
+import { onChange } from './on-change.js';
+test('onChange can observe a shallow change', () => {
+    let changeHappend = false;
+    const obj = onChange({ foo: 'hi' }, () => (changeHappend = true));
+    obj.foo = 'yo';
+    expect(changeHappend).toBe(true);
+});
+test('onChange can observe a deep change', () => {
+    let changeHappend = false;
+    const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+    obj.foo.bar = 'yo';
+    expect(changeHappend).toBe(true);
+});
+test('Smoke test: callback is not fired if no properties updated', () => {
+    let changeHappend = false;
+    const obj = onChange({ foo: { bar: 'hi' } }, () => (changeHappend = true));
+    // Access some properties
+    obj.foo.bar;
+    expect(changeHappend).toBe(false);
+});

package/package/functions/register-component.d.ts

@@ -0,0 +1,14 @@
+import { RegisteredComponent } from '../context/types.js';
+import type { ComponentInfo } from '../types/components.js';
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export declare const components: RegisteredComponent[];
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export declare function registerComponent(component: any, info: ComponentInfo): void;
+export declare const createRegisterComponentMessage: ({ component, ...info }: RegisteredComponent) => {
+    type: string;
+    data: ComponentInfo;
+};

package/package/functions/register-component.js

@@ -0,0 +1,42 @@
+import '../context/types.js';
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export const components = [];
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export function registerComponent(component, info) {
+    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 = ({ component: _, ...info }) => ({
+    type: 'builder.registerComponent',
+    data: prepareComponentInfoToSend(info),
+});
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
+/**
+ * Input attributes that are functions must be converted to strings before being serialized to JSON.
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+const serializeFn = (fnValue) => {
+    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 prepareComponentInfoToSend = ({ inputs, ...info }) => ({
+    ...fastClone(info),
+    inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: serializeValue(value),
+    }), {})),
+});

package/package/functions/register.d.ts

@@ -0,0 +1,16 @@
+import { BuilderBlock } from '../types/builder-block.js';
+import { DeepPartial } from '../types/deep-partial.js';
+export interface InsertMenuItem {
+    name: string;
+    icon?: string;
+    item: DeepPartial<BuilderBlock>;
+}
+export interface InsertMenuConfig {
+    name: string;
+    priority?: number;
+    persist?: boolean;
+    advanced?: boolean;
+    items: InsertMenuItem[];
+}
+export declare function register(type: 'insertMenu', info: InsertMenuConfig): void;
+export declare function register(type: string, info: any): void;

package/package/functions/register.js

@@ -0,0 +1,29 @@
+import '../types/builder-block.js';
+import '../types/deep-partial.js';
+import { isBrowser } from './is-browser.js';
+const registry = {};
+export function register(type, info) {
+    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/package/functions/sanitize-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * No-op function, sanitize on a per-framework basis by overriding.
+ */
+export declare const sanitizeBlockStyles: (_styles: Partial<CSSStyleDeclaration>) => void;

package/package/functions/sanitize-styles.js

@@ -0,0 +1,6 @@
+/**
+ * No-op function, sanitize on a per-framework basis by overriding.
+ */
+export const sanitizeBlockStyles = (_styles
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+) => { };

package/package/functions/set-editor-settings.d.ts

@@ -0,0 +1,4 @@
+export declare type Settings = {
+    customInsertMenu?: boolean;
+};
+export declare function setEditorSettings(newSettings: Settings): void;

package/package/functions/set-editor-settings.js

@@ -0,0 +1,12 @@
+import { isBrowser } from './is-browser.js';
+const settings = {};
+export function setEditorSettings(newSettings) {
+    if (isBrowser()) {
+        Object.assign(settings, newSettings);
+        const message = {
+            type: 'builder.settingsChange',
+            data: settings,
+        };
+        parent.postMessage(message, '*');
+    }
+}

package/package/functions/set.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Minimal implementation of lodash's _.set
+ * https://lodash.com/docs/4.17.15#set
+ *
+ * See ./set.test.ts for usage examples
+ */
+export declare const set: (obj: any, _path: string | string[], value: any) => any;

package/package/functions/set.js

@@ -0,0 +1,21 @@
+/**
+ * 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, _path, value) => {
+    if (Object(obj) !== obj) {
+        return obj;
+    }
+    const path = Array.isArray(_path)
+        ? _path
+        : _path.toString().match(/[^.[\]]+/g);
+    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/package/functions/set.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package/functions/set.test.js

@@ -0,0 +1,16 @@
+import { set } from './set.js';
+test('can shallow set a property', () => {
+    const obj = { foo: 'bar' };
+    set(obj, 'foo', 'baz');
+    expect(obj.foo).toBe('baz');
+});
+test('can deeply set a property', () => {
+    const obj = { foo: 'bar' };
+    set(obj, 'foo.bar', 'baz');
+    expect(obj.foo.bar).toBe('baz');
+});
+test('can deeply create arrays', () => {
+    const obj = { foo: 'bar' };
+    set(obj, 'foo.bar.0', 'hi');
+    expect(obj.foo.bar).toEqual(['hi']);
+});

package/package/functions/track.d.ts

@@ -0,0 +1,21 @@
+import { CanTrack } from '../types/can-track.js';
+interface Event {
+    type: 'click' | 'impression';
+    data: {
+        contentId?: string;
+        ownerId: string;
+        metadata?: string;
+        sessionId: string | undefined;
+        visitorId: string | undefined;
+        [index: string]: any;
+    };
+}
+declare type EventProperties = {
+    type: Event['type'];
+    orgId: Event['data']['ownerId'];
+    contentId: Event['data']['contentId'];
+    [index: string]: any;
+};
+export declare type EventProps = EventProperties & CanTrack;
+export declare function track(eventProps: EventProps): Promise<void | Response>;
+export {};

package/package/functions/track.js

@@ -0,0 +1,49 @@
+import { TARGET } from '../constants/target.js';
+import { getSessionId } from '../helpers/sessionId.js';
+import { getVisitorId } from '../helpers/visitorId.js';
+import '../types/can-track.js';
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+const getTrackingEventData = ({ canTrack }) => {
+    if (!canTrack) {
+        return { visitorId: undefined, sessionId: undefined };
+    }
+    const sessionId = getSessionId({ canTrack });
+    const visitorId = getVisitorId({ canTrack });
+    return {
+        sessionId,
+        visitorId,
+    };
+};
+const createEvent = ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+    type: eventType,
+    data: {
+        ...properties,
+        ...getTrackingEventData({ canTrack }),
+        ownerId: orgId,
+        contentId,
+    },
+});
+export async function track(eventProps) {
+    if (!eventProps.canTrack) {
+        return;
+    }
+    if (isEditing()) {
+        return;
+    }
+    if (!(isBrowser() || TARGET === 'reactNative')) {
+        return;
+    }
+    return fetch(`https://builder.io/api/v1/track`, {
+        method: 'POST',
+        body: JSON.stringify({
+            events: [createEvent(eventProps)],
+        }),
+        headers: {
+            'content-type': 'application/json',
+        },
+        mode: 'cors',
+    }).catch((err) => {
+        console.error('Failed to track: ', err);
+    });
+}

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

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

package/package/functions/transform-block.js

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

package/package/helpers/cookie.d.ts

@@ -0,0 +1,9 @@
+import { CanTrack } from '../types/can-track.js';
+export declare const getCookie: ({ name, canTrack, }: {
+    name: string;
+} & CanTrack) => string | undefined;
+export declare const setCookie: ({ name, value, expires, canTrack, }: {
+    name: string;
+    value: string;
+    expires?: Date | undefined;
+} & CanTrack) => undefined;

package/package/helpers/cookie.js

@@ -0,0 +1,55 @@
+import { isBrowser } from '../functions/is-browser.js';
+import '../types/can-track.js';
+import { getTopLevelDomain } from './url.js';
+export const getCookie = ({ 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) {
+        console.debug('[COOKIE] GET error: ', err);
+    }
+};
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => (value ? `${key}=${value}` : key)).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;
+};
+export const setCookie = ({ name, value, expires, canTrack, }) => {
+    try {
+        if (!canTrack) {
+            return undefined;
+        }
+        const cookie = createCookieString({ name, value, expires });
+        document.cookie = cookie;
+    }
+    catch (err) {
+        console.warn('[COOKIE] SET error: ', err);
+    }
+};

package/package/helpers/css.d.ts

@@ -0,0 +1 @@
+export declare const convertStyleMaptoCSS: (style: Partial<CSSStyleDeclaration>) => string;

package/package/helpers/css.js

@@ -0,0 +1,9 @@
+import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
+export const convertStyleMaptoCSS = (style) => {
+    const cssProps = Object.entries(style).map(([key, value]) => {
+        if (typeof value === 'string') {
+            return `${camelToKebabCase(key)}: ${value};`;
+        }
+    });
+    return cssProps.join('\n');
+};

package/package/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/package/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/package/helpers/localStorage.d.ts

@@ -0,0 +1,9 @@
+export declare const getLocalStorageItem: ({ key, canTrack, }: {
+    key: string;
+    canTrack: boolean;
+}) => string | null | undefined;
+export declare const setLocalStorageItem: ({ key, canTrack, value, }: {
+    key: string;
+    value: string;
+    canTrack: boolean;
+}) => void;

package/package/helpers/localStorage.js

@@ -0,0 +1,23 @@
+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);
+    }
+};
+export const setLocalStorageItem = ({ key, canTrack, value, }) => {
+    try {
+        if (canTrack) {
+            getLocalStorage()?.setItem(key, value);
+        }
+    }
+    catch (err) {
+        console.debug('[LocalStorage] SET error: ', err);
+    }
+};

package/package/helpers/nullable.d.ts

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

package/package/helpers/nullable.js

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

package/package/helpers/sessionId.d.ts

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

package/package/helpers/sessionId.js

@@ -0,0 +1,20 @@
+import '../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 = ({ canTrack }) => {
+    if (!canTrack) {
+        return undefined;
+    }
+    const sessionId = getCookie({ name: SESSION_LOCAL_STORAGE_KEY, canTrack });
+    if (checkIsDefined(sessionId)) {
+        return sessionId;
+    }
+    else {
+        const newSessionId = createSessionId();
+        setSessionId({ id: newSessionId, canTrack });
+    }
+};
+export const createSessionId = () => uuid();
+export const setSessionId = ({ id, canTrack, }) => setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });

package/package/helpers/time.d.ts

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

package/package/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/package/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;