fix sdk api

packages/db/clickhouse_tables.sql

@@ -1,4 +1,4 @@
-CREATE TABLE test.events (
+CREATE TABLE openpanel.events (
   `name` String,
   `profile_id` String,
   `project_id` String,

packages/db/src/services/event.service.ts

@@ -56,7 +56,10 @@ export interface IServiceCreateEventPayload {
   name: string;
   profileId: string;
   projectId: string;
-  properties: Record<string, unknown>;
+  properties: Record<string, unknown> & {
+    hash?: string;
+    query?: Record<string, unknown>;
+  };
   createdAt: string;
   country?: string | undefined;
   city?: string | undefined;

packages/sdk-web/cdn.ts

@@ -0,0 +1,14 @@
+// @ts-nocheck
+
+import { MixanWeb as Openpanel } from './index';
+
+const el = document.currentScript;
+if (el) {
+  window.openpanel = new Openpanel({
+    url: el?.getAttribute('url'),
+    clientId: el?.getAttribute('client-id'),
+    clientSecret: el?.getAttribute('client-secret'),
+    trackOutgoingLinks: !!el?.getAttribute('track-outgoing-links'),
+    trackScreenViews: !!el?.getAttribute('track-screen-views'),
+  });
+}

packages/sdk-web/index.ts

@@ -1,74 +1,35 @@
-import type { NewMixanOptions } from '@mixan/sdk';
+import type { MixanOptions } from '@mixan/sdk';
 import { Mixan } from '@mixan/sdk';
-import type { PartialBy } from '@mixan/types';
 
-import { parseQuery } from './src/parseQuery';
-import { getTimezone } from './src/utils';
+type MixanWebOptions = MixanOptions & {
+  trackOutgoingLinks?: boolean;
+  trackScreenViews?: boolean;
+  hash?: boolean;
+};
 
-export class MixanWeb extends Mixan {
-  constructor(
-    options: PartialBy<NewMixanOptions, 'setItem' | 'removeItem' | 'getItem'>
-  ) {
-    const hasStorage = typeof localStorage === 'undefined';
-    super({
-      batchInterval: options.batchInterval ?? 2000,
-      setItem: hasStorage ? () => {} : localStorage.setItem.bind(localStorage),
-      removeItem: hasStorage
-        ? () => {}
-        : localStorage.removeItem.bind(localStorage),
-      getItem: hasStorage
-        ? () => null
-        : localStorage.getItem.bind(localStorage),
-      ...options,
-    });
+export class MixanWeb extends Mixan<MixanWebOptions> {
+  constructor(options: MixanWebOptions) {
+    super(options);
+
+    if (this.options.trackOutgoingLinks) {
+      this.trackOutgoingLinks();
+    }
+
+    if (this.options.trackScreenViews) {
+      this.trackScreenViews();
+    }
   }
 
   private isServer() {
     return typeof document === 'undefined';
   }
 
-  private parseUrl(url?: string) {
-    if (!url || url === '') {
-      return {};
+  private getTimezone() {
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch (e) {
+      return undefined;
     }
-
-    const ref = new URL(url);
-    return {
-      host: ref.host,
-      path: ref.pathname,
-      query: parseQuery(ref.search),
-      hash: ref.hash,
-    };
-  }
-
-  private properties() {
-    return {
-      ua: navigator.userAgent,
-      referrer: document.referrer || undefined,
-      language: navigator.language,
-      timezone: getTimezone(),
-      screen: {
-        width: window.screen.width,
-        height: window.screen.height,
-      },
-      title: document.title,
-      ...this.parseUrl(window.location.href),
-    };
-  }
-
-  public init(properties?: Record<string, unknown>) {
-    if (this.isServer()) {
-      return;
-    }
-
-    super.init({
-      ...this.properties(),
-      ...(properties ?? {}),
-    });
-
-    window.addEventListener('beforeunload', () => {
-      this.flush();
-    });
   }
 
   public trackOutgoingLinks() {
@@ -85,21 +46,53 @@ export class MixanWeb extends Mixan {
             href,
             text: target.innerText,
           });
-          super.flush();
         }
       }
     });
   }
 
+  public trackScreenViews() {
+    if (this.isServer()) {
+      return;
+    }
+
+    const oldPushState = history.pushState;
+    history.pushState = function pushState(...args) {
+      const ret = oldPushState.apply(this, args);
+      window.dispatchEvent(new Event('pushstate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    const oldReplaceState = history.replaceState;
+    history.replaceState = function replaceState(...args) {
+      const ret = oldReplaceState.apply(this, args);
+      window.dispatchEvent(new Event('replacestate'));
+      window.dispatchEvent(new Event('locationchange'));
+      return ret;
+    };
+
+    window.addEventListener('popstate', () =>
+      window.dispatchEvent(new Event('locationchange'))
+    );
+
+    if (this.options.hash) {
+      window.addEventListener('hashchange', () => this.screenView());
+    } else {
+      window.addEventListener('locationchange', () => this.screenView());
+    }
+  }
+
   public screenView(properties?: Record<string, unknown>): void {
     if (this.isServer()) {
       return;
     }
 
     super.event('screen_view', {
-      ...properties,
-      ...this.parseUrl(window.location.href),
+      ...(properties ?? {}),
+      path: window.location.href,
       title: document.title,
+      referrer: document.referrer,
     });
   }
 }

packages/sdk-web/src/parseQuery.ts

@@ -1,8 +0,0 @@
-export function parseQuery(query: string): Record<string, string> {
-  const params = new URLSearchParams(query);
-  const result: Record<string, string> = {};
-  for (const [key, value] of params.entries()) {
-    result[key] = value;
-  }
-  return result;
-}

packages/sdk-web/src/utils.ts

@@ -1,7 +0,0 @@
-export function getTimezone() {
-  try {
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  } catch (e) {
-    return 'unknown';
-  }
-}

packages/sdk/index.ts

@@ -1,83 +1,40 @@
-import type {
-  BatchPayload,
-  BatchUpdateProfilePayload,
-  BatchUpdateSessionPayload,
-  MixanErrorResponse,
-} from '@mixan/types';
+import type { PostEventPayload } from '@mixan/types';
 
-type MixanLogger = (...args: unknown[]) => void;
-
-// -- 1. Besök
-// -- 2. Finns profile id?
-// --   NEJ
-// --   a. skicka events som vanligt (retunera genererat ID)
-// --   b. ge möjlighet att spara
-// --   JA
-// --   a. skicka event med profile_id
-// -- Payload
-// -- - user_agent?
-// -- - ip?
-// -- - profile_id?
-// -- - referrer
-
-export interface NewMixanOptions {
+export interface MixanOptions {
   url: string;
   clientId: string;
   clientSecret?: string;
   verbose?: boolean;
-  setItem?: (key: string, profileId: string) => void;
-  getItem?: (key: string) => string | null;
-  removeItem?: (key: string) => void;
+  setProfileId?: (profileId: string) => void;
+  getProfileId?: () => string | null | undefined;
+  removeProfileId?: () => void;
 }
 
-export type MixanOptions = Required<NewMixanOptions>;
-
 export interface MixanState {
-  profileId: null | string;
+  profileId?: string;
   properties: Record<string, unknown>;
 }
 
-function createLogger(verbose: boolean): MixanLogger {
-  return verbose ? (...args) => console.log('[Mixan]', ...args) : () => {};
-}
-
-class Fetcher {
-  private url: string;
-  private clientId: string;
-  private clientSecret: string;
-
-  constructor(
-    options: MixanOptions,
-    private logger: MixanLogger
-  ) {
-    this.url = options.url;
-    this.clientId = options.clientId;
-    this.clientSecret = options.clientSecret;
-  }
-
-  post<PostData, PostResponse>(
+function createApi(_url: string, clientId: string, clientSecret?: string) {
+  return function post<ReqBody, ResBody>(
     path: string,
-    data?: PostData,
+    data: ReqBody,
     options?: RequestInit
-  ): Promise<PostResponse | null> {
-    const url = `${this.url}${path}`;
+  ): Promise<ResBody | null> {
+    const url = `${_url}${path}`;
     let timer: ReturnType<typeof setTimeout>;
-
+    const headers: Record<string, string> = {
+      'mixan-client-id': clientId,
+      'Content-Type': 'application/json',
+    };
+    if (clientSecret) {
+      headers['mixan-client-secret'] = clientSecret;
+    }
     return new Promise((resolve) => {
       const wrappedFetch = (attempt: number) => {
         clearTimeout(timer);
-
-        this.logger(
-          `Request attempt ${attempt + 1}: ${url}`,
-          JSON.stringify(data, null, 2)
-        );
-
         fetch(url, {
-          headers: {
-            ['mixan-client-id']: this.clientId,
-            ['mixan-client-secret']: this.clientSecret,
-            'Content-Type': 'application/json',
-          },
+          headers,
           method: 'POST',
           body: JSON.stringify(data ?? {}),
           keepalive: true,
@@ -88,15 +45,13 @@ class Fetcher {
               return retry(attempt, resolve);
             }
 
-            const response = (await res.json()) as
-              | MixanErrorResponse
-              | PostResponse;
+            const response = await res.json();
 
             if (!response) {
               return resolve(null);
             }
 
-            resolve(response as PostResponse);
+            resolve(response as ResBody);
           })
           .catch(() => {
             return retry(attempt, resolve);
@@ -105,9 +60,9 @@ class Fetcher {
 
       function retry(
         attempt: number,
-        resolve: (value: PostResponse | null) => void
+        resolve: (value: ResBody | null) => void
       ) {
-        if (attempt > 3) {
+        if (attempt > 1) {
           return resolve(null);
         }
 
@@ -121,88 +76,85 @@ class Fetcher {
 
       wrappedFetch(0);
     });
-  }
+  };
 }
 
-export class Mixan {
-  private options: MixanOptions;
-  private fetch: Fetcher;
-  private logger: (...args: any[]) => void;
+export class Mixan<Options extends MixanOptions = MixanOptions> {
+  public options: Options;
+  private api: ReturnType<typeof createApi>;
   private state: MixanState = {
-    profileId: null,
     properties: {},
   };
 
-  constructor(options: NewMixanOptions) {
-    this.logger = createLogger(options.verbose ?? false);
-    this.options = {
-      verbose: false,
-      clientSecret: '',
-      ...options,
-    };
-    this.fetch = new Fetcher(this.options, this.logger);
+  constructor(options: Options) {
+    this.options = options;
+    this.api = createApi(options.url, options.clientId, options.clientSecret);
   }
 
   // Public
 
   public init(properties?: Record<string, unknown>) {
-    this.logger('Init');
     this.state.properties = properties ?? {};
   }
 
-  public setUser(payload: Omit<BatchUpdateProfilePayload, 'profileId'>) {
-    this.batcher.add({
-      type: 'update_profile',
-      payload: {
-        ...payload,
-        properties: payload.properties ?? {},
-        profileId: this.state.profileId,
-      },
-    });
+  // public setUser(payload: Omit<BatchUpdateProfilePayload, 'profileId'>) {
+  //   this.batcher.add({
+  //     type: 'update_profile',
+  //     payload: {
+  //       ...payload,
+  //       properties: payload.properties ?? {},
+  //       profileId: this.state.profileId,
+  //     },
+  //   });
+  // }
+
+  // public increment(name: string, value: number) {
+  //   this.batcher.add({
+  //     type: 'increment',
+  //     payload: {
+  //       name,
+  //       value,
+  //       profileId: this.state.profileId,
+  //     },
+  //   });
+  // }
+
+  // public decrement(name: string, value: number) {
+  //   this.batcher.add({
+  //     type: 'decrement',
+  //     payload: {
+  //       name,
+  //       value,
+  //       profileId: this.state.profileId,
+  //     },
+  //   });
+  // }
+
+  private getProfileId() {
+    if (this.state.profileId) {
+      return this.state.profileId;
+    } else if (this.options.getProfileId) {
+      this.state.profileId = this.options.getProfileId() || undefined;
+    }
   }
 
-  public increment(name: string, value: number) {
-    this.batcher.add({
-      type: 'increment',
-      payload: {
-        name,
-        value,
-        profileId: this.state.profileId,
+  public async event(name: string, properties?: Record<string, unknown>) {
+    const profileId = await this.api<PostEventPayload, string>('/event', {
+      name,
+      properties: {
+        ...this.state.properties,
+        ...(properties ?? {}),
       },
+      timestamp: this.timestamp(),
+      profileId: this.getProfileId(),
     });
-  }
 
-  public decrement(name: string, value: number) {
-    this.batcher.add({
-      type: 'decrement',
-      payload: {
-        name,
-        value,
-        profileId: this.state.profileId,
-      },
-    });
-  }
-
-  public event(name: string, properties?: Record<string, unknown>) {
-    this.fetch
-      .post('/event', {
-        name,
-        properties: {
-          ...this.state.properties,
-          ...(properties ?? {}),
-        },
-        time: this.timestamp(),
-        profileId: this.state.profileId,
-      })
-      .then((response) => {
-        if ('profileId' in response) {
-          this.options.setItem('@mixan:profileId', response.profileId);
-        }
-      });
+    if (this.options.setProfileId && profileId) {
+      this.options.setProfileId(profileId);
+    }
   }
 
   public setGlobalProperties(properties: Record<string, unknown>) {
-    this.logger('Set global properties', properties);
     this.state.properties = {
       ...this.state.properties,
       ...properties,
@@ -210,9 +162,10 @@ export class Mixan {
   }
 
   public clear() {
-    this.logger('Clear / Logout');
-    this.options.removeItem('@mixan:profileId');
-    this.state.profileId = null;
+    this.state.profileId = undefined;
+    if (this.options.removeProfileId) {
+      this.options.removeProfileId();
+    }
   }
 
   public setUserProperty(name: string, value: unknown, update = true) {

packages/types/index.ts

@@ -131,3 +131,12 @@ export interface MixanResponse<T> {
   result: T;
   status: 'ok';
 }
+
+// NEW
+
+export interface PostEventPayload {
+  name: string;
+  timestamp: string;
+  profileId?: string;
+  properties?: Record<string, unknown>;
+}