@builder.io/sdk-svelte 0.0.4 → 0.0.6

package/src/functions/register-component.ts

@@ -0,0 +1,67 @@
+import type { RegisteredComponent } from '../context/types.js';
+import type { ComponentInfo, Input } from '../types/components.js';
+import { fastClone } from './fast-clone.js';
+
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export const components: RegisteredComponent[] = [];
+
+/**
+ * @deprecated.  Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.
+ */
+export function registerComponent(component: any, info: ComponentInfo): void {
+  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
+}: RegisteredComponent) => ({
+  type: 'builder.registerComponent',
+  data: prepareComponentInfoToSend(info),
+});
+
+const serializeValue = (value: object): any =>
+  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: Function) => {
+  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
+}: ComponentInfo): ComponentInfo => ({
+  ...fastClone(info),
+  inputs: inputs?.map(
+    (input): Input =>
+      Object.entries(input).reduce(
+        (acc, [key, value]) => ({
+          ...acc,
+          [key]: serializeValue(value),
+        }),
+        {} as Input
+      )
+  ),
+});

package/src/functions/register.ts

@@ -0,0 +1,46 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+import type { DeepPartial } from '../types/deep-partial.js';
+import { isBrowser } from './is-browser.js';
+
+export interface InsertMenuItem {
+  name: string;
+  icon?: string;
+  item: DeepPartial<BuilderBlock>;
+}
+
+export interface InsertMenuConfig {
+  name: string;
+  priority?: number;
+  persist?: boolean;
+  advanced?: boolean;
+  items: InsertMenuItem[];
+}
+
+const registry: { [key: string]: any[] } = {};
+
+export function register(type: 'insertMenu', info: InsertMenuConfig): void;
+export function register(type: string, info: any): void;
+export function register(type: string, info: any) {
+  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/src/functions/sanitize-react-native-block-styles.ts

@@ -0,0 +1,65 @@
+const propertiesThatMustBeNumber = new Set(['lineHeight']);
+const displayValues = new Set(['flex', 'none']);
+
+const SHOW_WARNINGS = false;
+
+type Styles = Record<string, string | number>;
+
+const normalizeNumber = (value: number): number | undefined => {
+  if (Number.isNaN(value)) {
+    return undefined;
+  } else if (value < 0) {
+    // TODO: why are negative values not allowed?
+    return 0;
+  } else {
+    return value;
+  }
+};
+
+export const sanitizeReactNativeBlockStyles = (styles: Styles): Styles => {
+  return Object.keys(styles).reduce<Styles>((acc, key): Styles => {
+    const propertyValue = styles[key];
+
+    if (key === 'display' && !displayValues.has(propertyValue as string)) {
+      if (SHOW_WARNINGS) {
+        console.warn(
+          `Style value for key "display" must be "flex" or "none" but had ${propertyValue}`
+        );
+      }
+      return acc;
+    }
+
+    if (
+      propertiesThatMustBeNumber.has(key) &&
+      typeof propertyValue !== 'number'
+    ) {
+      if (SHOW_WARNINGS) {
+        console.warn(
+          `Style key ${key} must be a number, but had value \`${styles[key]}\``
+        );
+      }
+      return acc;
+    }
+
+    if (typeof propertyValue === 'string') {
+      // `px` units need to be stripped and replaced with numbers
+      // https://regexr.com/6ualn
+      const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+
+      if (isPixelUnit) {
+        const newValue = parseFloat(propertyValue);
+        const normalizedValue = normalizeNumber(newValue);
+        if (normalizedValue) {
+          return { ...acc, [key]: normalizedValue };
+        } else {
+          return acc;
+        }
+      } else if (propertyValue === '0') {
+        // 0 edge case needs to be handled
+        return { ...acc, [key]: 0 };
+      }
+    }
+
+    return { ...acc, [key]: propertyValue };
+  }, {});
+};

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

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

package/src/functions/set.test.ts

@@ -0,0 +1,19 @@
+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 as any).bar).toBe('baz');
+});
+
+test('can deeply create arrays', () => {
+  const obj = { foo: 'bar' };
+  set(obj, 'foo.bar.0', 'hi');
+  expect((obj.foo as any).bar).toEqual(['hi']);
+});

package/src/functions/set.ts

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

@@ -0,0 +1,124 @@
+import { TARGET } from '../constants/target.js';
+import { getSessionId } from '../helpers/sessionId.js';
+import { getVisitorId } from '../helpers/visitorId.js';
+import type { CanTrack } from '../types/can-track.js';
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+
+interface Event {
+  type: 'click' | 'impression';
+  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;
+    /**
+     * Stringified JSON object containing any additional metadata you want to track.
+     */
+    metadata?: string;
+    /**
+     * 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 TrackingData = {
+  visitorId: string | undefined;
+  sessionId: string | undefined;
+};
+
+const getTrackingEventData = async ({
+  canTrack,
+}: CanTrack): Promise<TrackingData> => {
+  if (!canTrack) {
+    return { visitorId: undefined, sessionId: undefined };
+  }
+
+  const sessionId = await getSessionId({ canTrack });
+  const visitorId = getVisitorId({ canTrack });
+
+  return {
+    sessionId,
+    visitorId,
+  };
+};
+
+type EventProperties = Pick<Event, 'type'> &
+  Pick<Event['data'], 'contentId' | 'variationId'> & {
+    /**
+     * Your organization's API key.
+     */
+    apiKey: Event['data']['ownerId'];
+    /**
+     * (Optional) metadata that you want to provide with your event.
+     */
+    metadata?: {
+      [index: string]: any;
+    };
+
+    /**
+     * (Optional) Any additional (non-metadata) properties to add to the event.
+     */
+    [index: string]: any;
+  };
+
+export type EventProps = EventProperties & CanTrack;
+
+const createEvent = async ({
+  type: eventType,
+  canTrack,
+  apiKey,
+  metadata,
+  ...properties
+}: EventProps): Promise<Event> => ({
+  type: eventType,
+  data: {
+    ...properties,
+    metadata: JSON.stringify(metadata),
+    ...(await getTrackingEventData({ canTrack })),
+    ownerId: apiKey,
+  },
+});
+
+export async function _track(eventProps: 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: [await createEvent(eventProps)],
+    }),
+    headers: {
+      'content-type': 'application/json',
+    },
+    mode: 'cors',
+  }).catch((err) => {
+    console.error('Failed to track: ', err);
+  });
+}
+
+export const track = (args: EventProperties) =>
+  _track({ ...args, canTrack: true });

package/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/src/helpers/ab-tests.ts

@@ -0,0 +1,22 @@
+import type { CanTrack } from '../types/can-track.js';
+import { getCookie, setCookie } from './cookie.js';
+
+const BUILDER_STORE_PREFIX = 'builderio.variations';
+
+const getContentTestKey = (id: string) => `${BUILDER_STORE_PREFIX}.${id}`;
+
+export const getContentVariationCookie = ({
+  contentId,
+  canTrack,
+}: { contentId: string } & CanTrack) =>
+  getCookie({ name: getContentTestKey(contentId), canTrack });
+
+export const setContentVariationCookie = ({
+  contentId,
+  canTrack,
+  value,
+}: {
+  contentId: string;
+  value: string;
+} & CanTrack) =>
+  setCookie({ name: getContentTestKey(contentId), value, canTrack });

package/src/helpers/cookie.ts

@@ -0,0 +1,102 @@
+import { isBrowser } from '../functions/is-browser.js';
+import type { CanTrack } from '../types/can-track.js';
+import { getTopLevelDomain } from './url.js';
+
+/**
+ * NOTE: This function is `async` because its react-native override is async. Do not remove the `async` keyword!
+ */
+export const getCookie = async ({
+  name,
+  canTrack,
+}: {
+  name: string;
+} & 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);
+  }
+};
+
+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)).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) => {
+  try {
+    if (!canTrack) {
+      return undefined;
+    }
+    const cookie = createCookieString({ name, value, expires });
+    document.cookie = cookie;
+  } catch (err) {
+    console.warn('[COOKIE] SET error: ', err);
+  }
+};

package/src/helpers/css.ts

@@ -0,0 +1,33 @@
+import { camelToKebabCase } from '../functions/camel-to-kebab-case.js';
+
+const convertStyleMaptoCSS = (style: Partial<CSSStyleDeclaration>): string => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === 'string') {
+      return `${camelToKebabCase(key)}: ${value};`;
+    }
+  });
+
+  return cssProps.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/src/helpers/flatten.ts

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

@@ -0,0 +1,38 @@
+import { isBrowser } from '../functions/is-browser.js';
+import type { CanTrack } from '../types/can-track.js';
+
+const getLocalStorage = () =>
+  isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
+
+export const getLocalStorageItem = ({
+  key,
+  canTrack,
+}: {
+  key: string;
+} & CanTrack) => {
+  try {
+    if (canTrack) {
+      return getLocalStorage()?.getItem(key);
+    }
+    return undefined;
+  } catch (err) {
+    console.debug('[LocalStorage] GET error: ', err);
+  }
+};
+
+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/src/helpers/nullable.ts

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

package/src/helpers/sessionId.ts

@@ -0,0 +1,34 @@
+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) => {
+  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 });
+  }
+};
+
+export const createSessionId = () => uuid();
+
+export const setSessionId = ({
+  id,
+  canTrack,
+}: {
+  id: string;
+} & CanTrack) =>
+  setCookie({ name: SESSION_LOCAL_STORAGE_KEY, value: id, canTrack });

package/src/helpers/time.ts

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

package/src/helpers/url.test.ts

@@ -0,0 +1,16 @@
+import { getTopLevelDomain } from './url.js';
+
+describe('getTopLevelDomain', () => {
+  test('handles root domain', () => {
+    const output = getTopLevelDomain('example.com');
+    expect(output).toBe('example.com');
+  });
+  test('handles subdomain', () => {
+    const output = getTopLevelDomain('wwww.example.com');
+    expect(output).toBe('example.com');
+  });
+  test('handles subdomain with long suffix', () => {
+    const output = getTopLevelDomain('www.example.co.uk');
+    expect(output).toBe('example.co.uk');
+  });
+});

package/src/helpers/url.ts

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

package/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, '');
+}