@builder.io/sdk-svelte 0.1.1 → 0.1.3-0

package/src/functions/{track.ts → track/index.ts}

@@ -1,9 +1,11 @@
-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';
+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 type { Dictionary } from '../../types/typescript.js';
+import { isBrowser } from '../is-browser.js';
+import { isEditing } from '../is-editing.js';
+import { getUserAttributes } from './helpers.js';
 
 interface Event {
   /**
@@ -22,9 +24,9 @@ interface Event {
      */
     ownerId: string;
     /**
-     * Stringified JSON object containing any additional metadata you want to track.
+     * (Optional) metadata that you want to provide with your event.
      */
-    metadata?: string;
+    metadata?: Dictionary<any>;
     /**
      * Session ID of the user. This is provided by the SDK by checking session storage.
      */
@@ -63,18 +65,11 @@ const getTrackingEventData = async ({
 };
 
 type EventProperties = Pick<Event, 'type'> &
-  Pick<Event['data'], 'contentId' | 'variationId'> & {
+  Pick<Event['data'], 'contentId' | 'variationId' | 'metadata'> & {
     /**
      * 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.
      */
@@ -93,8 +88,12 @@ const createEvent = async ({
   type: eventType,
   data: {
     ...properties,
-    metadata: JSON.stringify(metadata),
+    metadata: {
+      url: location.href,
+      ...metadata,
+    },
     ...(await getTrackingEventData({ canTrack })),
+    userAttributes: getUserAttributes(),
     ownerId: apiKey,
   },
 });

package/src/helpers/cookie.ts

@@ -1,5 +1,6 @@
 import { isBrowser } from '../functions/is-browser.js';
 import type { CanTrack } from '../types/can-track.js';
+import { checkIsDefined } from './nullable.js';
 import { getTopLevelDomain } from './url.js';
 
 /**
@@ -10,7 +11,7 @@ export const getCookie = async ({
   canTrack,
 }: {
   name: string;
-} & CanTrack) => {
+} & CanTrack): Promise<string | undefined> => {
   try {
     if (!canTrack) {
       return undefined;
@@ -26,6 +27,7 @@ export const getCookie = async ({
       ?.split('=')[1];
   } catch (err) {
     console.debug('[COOKIE] GET error: ', err);
+    return undefined;
   }
 };
 
@@ -40,7 +42,10 @@ type CookieConfiguration = Array<
 >;
 
 const stringifyCookie = (cookie: CookieConfiguration): string =>
-  cookie.map(([key, value]) => (value ? `${key}=${value}` : key)).join('; ');
+  cookie
+    .map(([key, value]) => (value ? `${key}=${value}` : key))
+    .filter(checkIsDefined)
+    .join('; ');
 
 const SECURE_CONFIG: CookieConfiguration = [
   ['secure', ''],
@@ -89,10 +94,10 @@ export const setCookie = async ({
   name: string;
   value: string;
   expires?: Date;
-} & CanTrack) => {
+} & CanTrack): Promise<void> => {
   try {
     if (!canTrack) {
-      return undefined;
+      return;
     }
     const cookie = createCookieString({ name, value, expires });
     document.cookie = cookie;

package/src/helpers/localStorage.ts

@@ -1,5 +1,6 @@
 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;
@@ -9,7 +10,7 @@ export const getLocalStorageItem = ({
   canTrack,
 }: {
   key: string;
-} & CanTrack) => {
+} & CanTrack): Nullable<string> => {
   try {
     if (canTrack) {
       return getLocalStorage()?.getItem(key);
@@ -17,6 +18,7 @@ export const getLocalStorageItem = ({
     return undefined;
   } catch (err) {
     console.debug('[LocalStorage] GET error: ', err);
+    return undefined;
   }
 };
 

package/src/helpers/sessionId.ts

@@ -5,7 +5,9 @@ import { uuid } from './uuid.js';
 
 const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
 
-export const getSessionId = async ({ canTrack }: CanTrack) => {
+export const getSessionId = async ({
+  canTrack,
+}: CanTrack): Promise<string | undefined> => {
   if (!canTrack) {
     return undefined;
   }
@@ -20,6 +22,8 @@ export const getSessionId = async ({ canTrack }: CanTrack) => {
   } else {
     const newSessionId = createSessionId();
     setSessionId({ id: newSessionId, canTrack });
+
+    return newSessionId;
   }
 };
 

package/src/helpers/url.test.ts

@@ -13,4 +13,11 @@ describe('getTopLevelDomain', () => {
     const output = getTopLevelDomain('www.example.co.uk');
     expect(output).toBe('example.co.uk');
   });
+  test('handles localhost', () => {
+    const output = getTopLevelDomain('localhost');
+    expect(output).toBe('localhost');
+
+    const output2 = getTopLevelDomain('127.0.0.1');
+    expect(output2).toBe('127.0.0.1');
+  });
 });

package/src/helpers/url.ts

@@ -4,6 +4,10 @@
  * www.example.co.uk -> example.co.uk
  */
 export const getTopLevelDomain = (host: string) => {
+  if (host === 'localhost' || host === '127.0.0.1') {
+    return host;
+  }
+
   const parts = host.split('.');
   if (parts.length > 2) {
     return parts.slice(1).join('.');

package/src/helpers/visitorId.ts

@@ -5,7 +5,7 @@ import { uuid } from './uuid.js';
 
 const VISITOR_LOCAL_STORAGE_KEY = 'builderVisitorId';
 
-export const getVisitorId = ({ canTrack }: CanTrack) => {
+export const getVisitorId = ({ canTrack }: CanTrack): string | undefined => {
   if (!canTrack) {
     return undefined;
   }
@@ -20,6 +20,8 @@ export const getVisitorId = ({ canTrack }: CanTrack) => {
   } else {
     const newVisitorId = createVisitorId();
     setVisitorId({ id: newVisitorId, canTrack });
+
+    return newVisitorId;
   }
 };
 

package/src/index.ts

@@ -10,6 +10,6 @@ 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';
-export { track } from './functions/track';
+export { track } from './functions/track/index.js';
 export type { RegisteredComponent } from './context/types';
 export type { ComponentInfo } from './types/components';

package/package/components/render-block/render-component-with-context.svelte

@@ -1,32 +0,0 @@
-<script context="module"></script>
-
-<script>import { setContext } from "svelte";
-import BuilderContext from "../../context/builder.context.js";
-import RenderComponent from "./render-component.svelte";
-export let componentRef;
-export let componentOptions;
-export let blockChildren;
-export let context;
-setContext(BuilderContext.key, {
-    get content() {
-        return context.content;
-    },
-    get state() {
-        return context.state;
-    },
-    get context() {
-        return context.context;
-    },
-    get apiKey() {
-        return context.apiKey;
-    },
-    get registeredComponents() {
-        return context.registeredComponents;
-    },
-    get inheritedStyles() {
-        return context.inheritedStyles;
-    },
-});
-</script>
-
-<RenderComponent {componentRef} {componentOptions} {blockChildren} {context} />

package/package/components/render-block/render-component-with-context.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        componentRef: RenderComponentProps;
-        componentOptions: RenderComponentProps;
-        blockChildren: RenderComponentProps;
-        context: RenderComponentProps;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export declare type RenderComponentWithContextProps = typeof __propDef.props;
-export declare type RenderComponentWithContextEvents = typeof __propDef.events;
-export declare type RenderComponentWithContextSlots = typeof __propDef.slots;
-export default class RenderComponentWithContext extends SvelteComponentTyped<RenderComponentWithContextProps, RenderComponentWithContextEvents, RenderComponentWithContextSlots> {
-}
-export {};

package/src/components/render-block/render-component-with-context.svelte

@@ -1,38 +0,0 @@
-<script context="module" lang="ts">
-  import type { RenderComponentProps } from "./render-component";
-</script>
-
-<script lang="ts">
-  import { getContext, setContext } from "svelte";
-
-  import BuilderContext from "../../context/builder.context.js";
-  import RenderComponent from "./render-component.svelte";
-
-  export let componentRef: RenderComponentProps["componentRef"];
-  export let componentOptions: RenderComponentProps["componentOptions"];
-  export let blockChildren: RenderComponentProps["blockChildren"];
-  export let context: RenderComponentProps["context"];
-
-  setContext(BuilderContext.key, {
-    get content() {
-      return context.content;
-    },
-    get state() {
-      return context.state;
-    },
-    get context() {
-      return context.context;
-    },
-    get apiKey() {
-      return context.apiKey;
-    },
-    get registeredComponents() {
-      return context.registeredComponents;
-    },
-    get inheritedStyles() {
-      return context.inheritedStyles;
-    },
-  });
-</script>
-
-<RenderComponent {componentRef} {componentOptions} {blockChildren} {context} />