@builder.io/sdk-svelte 0.0.3 → 0.0.5

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

package/src/helpers/visitorId.ts

@@ -0,0 +1,38 @@
+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) => {
+  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 });
+  }
+};
+
+export const createVisitorId = () => uuid();
+
+export const setVisitorId = ({
+  id,
+  canTrack,
+}: {
+  id: string;
+} & CanTrack) =>
+  setLocalStorageItem({
+    key: VISITOR_LOCAL_STORAGE_KEY,
+    value: id,
+    canTrack,
+  });

package/src/index-helpers/blocks-exports.ts

@@ -0,0 +1,10 @@
+export { default as Columns } from '../blocks/columns/columns.svelte';
+export { default as Image } from '../blocks/image/image.svelte';
+export { default as Text } from '../blocks/text/text.svelte';
+export { default as Video } from '../blocks/video/video.svelte';
+export { default as Symbol } from '../blocks/symbol/symbol.svelte';
+export { default as Button } from '../blocks/button/button.svelte';
+export { default as Section } from '../blocks/section/section.svelte';
+export { default as Fragment } from '../blocks/fragment/fragment.svelte';
+export { default as RenderContent } from '../components/render-content/render-content.svelte';
+export { default as RenderBlocks } from '../components/render-blocks.svelte';

package/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/src/index.ts

@@ -0,0 +1,12 @@
+import './index-helpers/top-of-file.js';
+import './scripts/init-editing.js';
+
+export * from './index-helpers/blocks-exports.js';
+
+export * from './functions/is-editing.js';
+export * from './functions/is-previewing.js';
+export * from './functions/register-component.js';
+export * from './functions/register.js';
+export * from './functions/set-editor-settings.js';
+export * from './functions/get-content/index.js';
+export * from './functions/get-builder-search-params/index.js';

package/src/scripts/init-editing.ts

@@ -0,0 +1,102 @@
+import { TARGET } from '../constants/target.js';
+import { isBrowser } from '../functions/is-browser.js';
+import { register } from '../functions/register.js';
+
+export const registerInsertMenu = () => {
+  register('insertMenu', {
+    name: '_default',
+    default: true,
+    items: [
+      { name: 'Box' },
+      { name: 'Text' },
+      { name: 'Image' },
+      { name: 'Columns' },
+      ...(TARGET === 'reactNative'
+        ? []
+        : [
+            { name: 'Core:Section' },
+            { name: 'Core:Button' },
+            { name: 'Embed' },
+            { name: 'Custom Code' },
+          ]),
+    ],
+  });
+};
+
+export const setupBrowserForEditing = () => {
+  if (isBrowser()) {
+    window.parent?.postMessage(
+      {
+        type: 'builder.sdkInfo',
+        data: {
+          target: TARGET,
+          // TODO: compile these in
+          // type: process.env.SDK_TYPE,
+          // version: process.env.SDK_VERSION,
+          supportsPatchUpdates: false,
+          // Supports builder-model="..." attribute which is needed to
+          // scope our '+ add block' button styling
+          supportsAddBlockScoping: true,
+        },
+      },
+      '*'
+    );
+
+    window.addEventListener('message', ({ data }) => {
+      if (!data?.type) {
+        return;
+      }
+
+      switch (data.type) {
+        case 'builder.evaluate': {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          // tslint:disable-next-line:no-function-constructor-with-string-args
+          const fn = new Function(text);
+          let result: any;
+          let error: Error | null = null;
+          try {
+            // eslint-disable-next-line prefer-spread
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err as Error;
+          }
+
+          if (error) {
+            window.parent?.postMessage(
+              {
+                type: 'builder.evaluateError',
+                data: { id, error: error.message },
+              },
+              '*'
+            );
+          } else {
+            if (result && typeof result.then === 'function') {
+              (result as Promise<any>)
+                .then((finalResult) => {
+                  window.parent?.postMessage(
+                    {
+                      type: 'builder.evaluateResult',
+                      data: { id, result: finalResult },
+                    },
+                    '*'
+                  );
+                })
+                .catch(console.error);
+            } else {
+              window.parent?.postMessage(
+                {
+                  type: 'builder.evaluateResult',
+                  data: { result, id },
+                },
+                '*'
+              );
+            }
+          }
+          break;
+        }
+      }
+    });
+  }
+};

package/src/types/builder-block.ts

@@ -0,0 +1,58 @@
+type JSONValue = string | number | boolean | JSONObject | JSONArray;
+
+interface JSONObject {
+  [x: string]: JSONValue;
+}
+
+interface JSONArray extends Array<JSONValue> {}
+
+/** @todo typedoc this */
+export interface BuilderBlock {
+  '@type': '@builder.io/sdk:Element';
+  '@version'?: number;
+  id?: string;
+  tagName?: string;
+  layerName?: string;
+  groupLocked?: boolean;
+  layerLocked?: boolean;
+  /** @todo make alias for properties.class */
+  class?: string;
+  children?: BuilderBlock[];
+  responsiveStyles?: {
+    large?: Partial<CSSStyleDeclaration>;
+    medium?: Partial<CSSStyleDeclaration>;
+    small?: Partial<CSSStyleDeclaration>;
+    /** @deprecated */
+    xsmall?: Partial<CSSStyleDeclaration>;
+  };
+  component?: {
+    name: string;
+    options?: any;
+    tag?: string;
+  };
+  bindings?: {
+    [key: string]: string;
+  };
+  meta?: {
+    [key: string]: JSONValue;
+  };
+  actions?: {
+    [key: string]: string;
+  };
+  properties?: {
+    [key: string]: string;
+  };
+  code?: {
+    bindings?: {
+      [key: string]: string;
+    };
+    actions?: {
+      [key: string]: string;
+    };
+  };
+  repeat?: {
+    collection: string;
+    itemName?: string;
+  } | null;
+  animations?: any[]; // TODO: type the animation spec
+}

package/src/types/builder-content.ts

@@ -0,0 +1,39 @@
+import type { BuilderBlock } from './builder-block.js';
+
+// TODO
+type Input = any;
+
+export interface BuilderContentVariation {
+  data?: {
+    title?: string;
+    blocks?: BuilderBlock[];
+    inputs?: Input[];
+    state?: { [key: string]: any };
+    jsCode?: string;
+    tsCode?: string;
+    httpRequests?: { [key: string]: string };
+    [key: string]: any;
+  };
+  name?: string;
+  testRatio?: number;
+  id?: string;
+}
+
+// TODO: separate full and partial versions
+export interface BuilderContent extends BuilderContentVariation {
+  // TODO: query
+  '@version'?: number;
+  id?: string;
+  name?: string;
+  published?: 'published' | 'draft' | 'archived';
+  modelId?: string;
+  priority?: number;
+  lastUpdated?: number;
+  startDate?: number;
+  endDate?: number;
+  variations?: {
+    [id: string]: BuilderContentVariation | undefined;
+  };
+  testVariationId?: string;
+  testVariationName?: string;
+}

package/src/types/can-track.ts

@@ -0,0 +1,3 @@
+export type CanTrack = {
+  canTrack: boolean;
+};