initial for v1

packages/db/src/clickhouse-client.ts

@@ -4,6 +4,7 @@ import { createClient } from '@clickhouse/client';
 export const TABLE_NAMES = {
   events: 'events_v2',
   profiles: 'profiles',
+  alias: 'profile_aliases',
 };
 
 export const originalCh = createClient({

packages/queue/src/queues.ts

@@ -2,13 +2,15 @@ import { Queue } from 'bullmq';
 
 import type { IServiceEvent } from '@openpanel/db';
 import { getRedisQueue } from '@openpanel/redis';
-import type { PostEventPayload } from '@openpanel/sdk';
+import type { TrackPayload } from '@openpanel/sdk';
 
 export interface EventsQueuePayloadIncomingEvent {
   type: 'incomingEvent';
   payload: {
     projectId: string;
-    event: PostEventPayload;
+    event: TrackPayload & {
+      timestamp: string;
+    };
     geo: {
       country: string | undefined;
       city: string | undefined;

packages/sdks/express/index.ts

@@ -1,8 +1,8 @@
 import type { NextFunction, Request, Response } from 'express';
 import { getClientIp } from 'request-ip';
 
-import type { OpenpanelSdkOptions } from '@openpanel/sdk';
-import { OpenpanelSdk } from '@openpanel/sdk';
+import type { OpenPanelOptions } from '@openpanel/sdk';
+import { OpenPanel } from '@openpanel/sdk';
 
 export * from '@openpanel/sdk';
 
@@ -10,33 +10,35 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Express {
     export interface Request {
-      op: OpenpanelSdk;
+      op: OpenPanel;
     }
   }
 }
 
-export type OpenpanelOptions = OpenpanelSdkOptions & {
+export type OpenpanelOptions = OpenPanelOptions & {
   trackRequest?: (url: string) => boolean;
   getProfileId?: (req: Request) => string;
 };
 
 export default function createMiddleware(options: OpenpanelOptions) {
   return function middleware(req: Request, res: Response, next: NextFunction) {
-    const sdk = new OpenpanelSdk(options);
+    const sdk = new OpenPanel(options);
     const ip = getClientIp(req);
     if (ip) {
-      sdk.api.headers['x-client-ip'] = ip;
+      sdk.api.addHeader('x-client-ip', ip);
     }
 
     if (options.getProfileId) {
       const profileId = options.getProfileId(req);
       if (profileId) {
-        sdk.setProfileId(profileId);
+        sdk.identify({
+          profileId,
+        });
       }
     }
 
     if (options.trackRequest?.(req.url)) {
-      sdk.event('request', {
+      sdk.track('request', {
         url: req.url,
         method: req.method,
         query: req.query,

packages/sdks/nextjs/index.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import Script from 'next/script';
 
 import type {
-  OpenpanelEventOptions,
-  OpenpanelOptions,
-  PostEventPayload,
-  UpdateProfilePayload,
+  DecrementPayload,
+  IdentifyPayload,
+  IncrementPayload,
+  OpenPanelMethodNames,
+  OpenPanelOptions,
+  TrackProperties,
 } from '@openpanel/web';
 
 export * from '@openpanel/web';
@@ -13,48 +15,33 @@ export { createNextRouteHandler } from './createNextRouteHandler';
 
 const CDN_URL = 'https://openpanel.dev/op.js';
 
-declare global {
-  interface Window {
-    op: {
-      q?: [string, ...any[]];
-      (method: OpenpanelMethods, ...args: any[]): void;
-    };
-  }
-}
-
-type OpenpanelMethods =
-  | 'ctor'
-  | 'event'
-  | 'setProfile'
-  | 'setProfileId'
-  | 'increment'
-  | 'decrement'
-  | 'clear';
-
-declare global {
-  interface window {
-    op: {
-      q?: [string, ...any[]];
-      (method: OpenpanelMethods, ...args: any[]): void;
-    };
-  }
-}
-
-type OpenpanelProviderProps = OpenpanelOptions & {
+type OpenPanelComponentProps = OpenPanelOptions & {
   profileId?: string;
   cdnUrl?: string;
 };
 
-export function OpenpanelProvider({
+export function OpenPanelComponent({
   profileId,
   cdnUrl,
   ...options
-}: OpenpanelProviderProps) {
-  const methods: { name: OpenpanelMethods; value: unknown }[] = [
-    { name: 'ctor', value: options },
+}: OpenPanelComponentProps) {
+  const methods: { name: OpenPanelMethodNames; value: unknown }[] = [
+    {
+      name: 'init',
+      value: {
+        ...options,
+        sdk: 'nextjs',
+        sdkVersion: process.env.NEXTJS_VERSION!,
+      },
+    },
   ];
   if (profileId) {
-    methods.push({ name: 'setProfileId', value: profileId });
+    methods.push({
+      name: 'identify',
+      value: {
+        profileId,
+      },
+    });
   }
   return (
     <>
@@ -73,25 +60,9 @@ export function OpenpanelProvider({
   );
 }
 
-interface SetProfileIdProps {
-  value?: string;
-}
+type IdentifyComponentProps = IdentifyPayload;
 
-export function SetProfileId({ value }: SetProfileIdProps) {
-  return (
-    <>
-      <Script
-        dangerouslySetInnerHTML={{
-          __html: `window.op('setProfileId', '${value}');`,
-        }}
-      />
-    </>
-  );
-}
-
-type SetProfileProps = UpdateProfilePayload;
-
-export function SetProfile(props: SetProfileProps) {
+export function IdentifyComponent(props: IdentifyComponentProps) {
   return (
     <>
       <Script
@@ -103,41 +74,37 @@ export function SetProfile(props: SetProfileProps) {
   );
 }
 
-export function trackEvent(
-  name: string,
-  data?: PostEventPayload['properties']
-) {
-  window.op('event', name, data);
+export function useOpenPanel() {
+  return {
+    track,
+    screenView,
+    identify,
+    increment,
+    decrement,
+    clear,
+  };
 }
 
-export function trackScreenView(data?: PostEventPayload['properties']) {
-  trackEvent('screen_view', data);
+function track(name: string, properties?: TrackProperties) {
+  window.op('track', name, properties);
 }
 
-export function setProfile(data?: UpdateProfilePayload) {
-  window.op('setProfile', data);
+function screenView(properties: TrackProperties) {
+  track('screen_view', properties);
 }
 
-export function setProfileId(profileId: string) {
-  window.op('setProfileId', profileId);
+function identify(payload: IdentifyPayload) {
+  window.op('identify', payload);
 }
 
-export function increment(
-  property: string,
-  value: number,
-  options?: OpenpanelEventOptions
-) {
-  window.op('increment', property, value, options);
+function increment(payload: IncrementPayload) {
+  window.op('increment', payload);
 }
 
-export function decrement(
-  property: string,
-  value: number,
-  options?: OpenpanelEventOptions
-) {
-  window.op('decrement', property, value, options);
+function decrement(payload: DecrementPayload) {
+  window.op('decrement', payload);
 }
 
-export function clear() {
+function clear() {
   window.op('clear');
 }

packages/sdks/react-native/index.ts

@@ -2,28 +2,31 @@ import { AppState, Platform } from 'react-native';
 import * as Application from 'expo-application';
 import Constants from 'expo-constants';
 
-import type { OpenpanelSdkOptions, PostEventPayload } from '@openpanel/sdk';
-import { OpenpanelSdk } from '@openpanel/sdk';
+import type { OpenPanelOptions, TrackProperties } from '@openpanel/sdk';
+import { OpenPanel as OpenPanelBase } from '@openpanel/sdk';
 
 export * from '@openpanel/sdk';
-export type OpenpanelOptions = OpenpanelSdkOptions;
 
-export class Openpanel extends OpenpanelSdk<OpenpanelOptions> {
-  constructor(options: OpenpanelOptions) {
-    super(options);
+export class OpenPanel extends OpenPanelBase {
+  constructor(public options: OpenPanelOptions) {
+    super({
+      ...options,
+      sdk: 'react-native',
+      sdkVersion: process.env.REACT_NATIVE_VERSION!,
+    });
 
-    this.api.headers['User-Agent'] = Constants.getWebViewUserAgentAsync();
+    this.api.addHeader('User-Agent', Constants.getWebViewUserAgentAsync());
 
     AppState.addEventListener('change', (state) => {
       if (state === 'active') {
-        this.setProperties();
+        this.setDefaultProperties();
       }
     });
 
-    this.setProperties();
+    this.setDefaultProperties();
   }
 
-  private async setProperties() {
+  private async setDefaultProperties() {
     this.setGlobalProperties({
       __version: Application.nativeApplicationVersion,
       __buildNumber: Application.nativeBuildVersion,
@@ -34,11 +37,8 @@ export class Openpanel extends OpenpanelSdk<OpenpanelOptions> {
     });
   }
 
-  public screenView(
-    route: string,
-    properties?: PostEventPayload['properties']
-  ): void {
-    super.event('screen_view', {
+  public screenView(route: string, properties?: TrackProperties): void {
+    super.track('screen_view', {
       ...properties,
       __path: route,
     });

packages/sdks/react-native/package.json

@@ -15,15 +15,16 @@
     "@openpanel/eslint-config": "workspace:*",
     "@openpanel/prettier-config": "workspace:*",
     "@openpanel/tsconfig": "workspace:*",
+    "@types/node": "^20.14.12",
     "eslint": "^8.48.0",
     "prettier": "^3.0.3",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "react-native": "0.73 - 0.74",
     "expo-application": "^5",
-    "expo-constants": "14 - 16"
+    "expo-constants": "14 - 16",
+    "react-native": "0.73 - 0.74"
   },
   "eslintConfig": {
     "root": true,

packages/sdks/react-native/tsup.config.ts

@@ -2,4 +2,6 @@ import { defineConfig } from 'tsup';
 
 import config from '@openpanel/tsconfig/tsup.config.json' assert { type: 'json' };
 
-export default defineConfig(config as any);
+export default defineConfig({
+  ...(config as any),
+});

packages/sdks/sdk/index.ts

@@ -1,3 +1,8 @@
+export * from './src/index';
+
+// Deprecated types for beta version of the SDKs
+// Still used in api/event.controller.ts and api/profile.controller.ts
+
 export interface OpenpanelEventOptions {
   profileId?: string;
 }
@@ -29,201 +34,3 @@ export interface DecrementProfilePayload {
   property: string;
   value: number;
 }
-
-export interface OpenpanelSdkOptions {
-  url?: string;
-  clientId: string;
-  clientSecret?: string;
-  verbose?: boolean;
-}
-
-export interface OpenpanelState {
-  profileId?: string;
-  properties: Record<string, unknown>;
-}
-
-function awaitProperties(
-  properties: Record<string, string | Promise<string | null>>
-): Promise<Record<string, string>> {
-  return Promise.all(
-    Object.entries(properties).map(async ([key, value]) => {
-      return [key, (await value) ?? ''];
-    })
-  ).then((entries) => Object.fromEntries(entries));
-}
-
-function createApi(_url: string) {
-  const headers: Record<string, string | Promise<string | null>> = {
-    'Content-Type': 'application/json',
-  };
-  return {
-    headers,
-    async fetch<ReqBody, ResBody>(
-      path: string,
-      data: ReqBody,
-      options?: RequestInit
-    ): Promise<ResBody | null> {
-      const url = `${_url}${path}`;
-      let timer: ReturnType<typeof setTimeout>;
-      const h = await awaitProperties(headers);
-      return new Promise((resolve) => {
-        const wrappedFetch = (attempt: number) => {
-          clearTimeout(timer);
-          fetch(url, {
-            headers: h,
-            method: 'POST',
-            body: JSON.stringify(data ?? {}),
-            keepalive: true,
-            ...(options ?? {}),
-          })
-            .then(async (res) => {
-              if (res.status === 401) {
-                return null;
-              }
-
-              if (res.status !== 200 && res.status !== 202) {
-                return retry(attempt, resolve);
-              }
-
-              const response = await res.text();
-
-              if (!response) {
-                return resolve(null);
-              }
-
-              resolve(response as ResBody);
-            })
-            .catch(() => {
-              return retry(attempt, resolve);
-            });
-        };
-
-        function retry(
-          attempt: number,
-          resolve: (value: ResBody | null) => void
-        ) {
-          if (attempt > 1) {
-            return resolve(null);
-          }
-
-          timer = setTimeout(
-            () => {
-              wrappedFetch(attempt + 1);
-            },
-            Math.pow(2, attempt) * 500
-          );
-        }
-
-        wrappedFetch(0);
-      });
-    },
-  };
-}
-
-export class OpenpanelSdk<
-  Options extends OpenpanelSdkOptions = OpenpanelSdkOptions,
-> {
-  public options: Options;
-  public api: ReturnType<typeof createApi>;
-  private state: OpenpanelState = {
-    properties: {},
-  };
-
-  constructor(options: Options) {
-    this.options = options;
-    this.api = createApi(options.url ?? 'https://api.openpanel.dev');
-    this.api.headers['openpanel-client-id'] = options.clientId;
-    if (this.options.clientSecret) {
-      this.api.headers['openpanel-client-secret'] = this.options.clientSecret;
-    }
-  }
-
-  // Public
-
-  public setProfileId(profileId: string) {
-    this.state.profileId = profileId;
-  }
-
-  public async setProfile(payload: UpdateProfilePayload) {
-    this.setProfileId(payload.profileId);
-    return this.api.fetch<UpdateProfilePayload, string>('/profile', {
-      ...payload,
-      properties: {
-        ...this.state.properties,
-        ...payload.properties,
-      },
-    });
-  }
-
-  public async increment(
-    property: string,
-    value: number,
-    options?: OpenpanelEventOptions
-  ) {
-    const profileId = options?.profileId ?? this.state.profileId;
-    if (!profileId) {
-      return console.log('No profile id');
-    }
-    return this.api.fetch<IncrementProfilePayload, string>(
-      '/profile/increment',
-      {
-        profileId,
-        property,
-        value,
-      }
-    );
-  }
-
-  public async decrement(
-    property: string,
-    value: number,
-    options?: OpenpanelEventOptions
-  ) {
-    const profileId = options?.profileId ?? this.state.profileId;
-    if (!profileId) {
-      return console.log('No profile id');
-    }
-    return this.api.fetch<DecrementProfilePayload, string>(
-      '/profile/decrement',
-      {
-        profileId,
-        property,
-        value,
-      }
-    );
-  }
-
-  public async event(
-    name: string,
-    properties?: PostEventPayload['properties']
-  ) {
-    const profileId = properties?.profileId ?? this.state.profileId;
-    delete properties?.profileId;
-    return this.api.fetch<PostEventPayload, string>('/event', {
-      name,
-      properties: {
-        ...this.state.properties,
-        ...(properties ?? {}),
-      },
-      timestamp: this.timestamp(),
-      profileId,
-    });
-  }
-
-  public setGlobalProperties(properties: Record<string, unknown>) {
-    this.state.properties = {
-      ...this.state.properties,
-      ...properties,
-    };
-  }
-
-  public clear() {
-    this.state.profileId = undefined;
-  }
-
-  // Private
-
-  private timestamp() {
-    return new Date().toISOString();
-  }
-}

packages/sdks/sdk/package.json

@@ -13,6 +13,7 @@
     "@openpanel/eslint-config": "workspace:*",
     "@openpanel/prettier-config": "workspace:*",
     "@openpanel/tsconfig": "workspace:*",
+    "@types/node": "^20.14.12",
     "eslint": "^8.48.0",
     "prettier": "^3.0.3",
     "tsup": "^7.2.0",

packages/sdks/sdk/src/api.ts

@@ -0,0 +1,85 @@
+interface ApiConfig {
+  baseUrl: string;
+  defaultHeaders?: Record<string, string | Promise<string | null>>;
+  maxRetries?: number;
+  initialRetryDelay?: number;
+}
+
+interface FetchOptions extends RequestInit {
+  retries?: number;
+}
+
+export class Api {
+  private baseUrl: string;
+  private headers: Record<string, string | Promise<string | null>>;
+  private maxRetries: number;
+  private initialRetryDelay: number;
+
+  constructor(config: ApiConfig) {
+    this.baseUrl = config.baseUrl;
+    this.headers = {
+      'Content-Type': 'application/json',
+      ...config.defaultHeaders,
+    };
+    this.maxRetries = config.maxRetries ?? 3;
+    this.initialRetryDelay = config.initialRetryDelay ?? 500;
+  }
+
+  private async resolveHeaders(): Promise<Record<string, string>> {
+    const resolvedHeaders: Record<string, string> = {};
+    for (const [key, value] of Object.entries(this.headers)) {
+      const resolvedValue = await value;
+      if (resolvedValue !== null) {
+        resolvedHeaders[key] = resolvedValue;
+      }
+    }
+    return resolvedHeaders;
+  }
+
+  public addHeader(key: string, value: string | Promise<string | null>) {
+    this.headers[key] = value;
+  }
+
+  private async post<ReqBody, ResBody>(
+    url: string,
+    data: ReqBody,
+    options: FetchOptions,
+    attempt: number
+  ): Promise<ResBody | null> {
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: await this.resolveHeaders(),
+        body: JSON.stringify(data ?? {}),
+        keepalive: true,
+        ...options,
+      });
+
+      if (response.status === 401) return null;
+
+      if (response.status !== 200 && response.status !== 202) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const responseText = await response.text();
+      return responseText ? JSON.parse(responseText) : null;
+    } catch (error) {
+      if (attempt < this.maxRetries) {
+        const delay = this.initialRetryDelay * Math.pow(2, attempt);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        return this.post<ReqBody, ResBody>(url, data, options, attempt + 1);
+      }
+      console.error('Max retries reached:', error);
+      return null;
+    }
+  }
+
+  async fetch<ReqBody, ResBody>(
+    path: string,
+    data: ReqBody,
+    options: FetchOptions = {}
+  ): Promise<ResBody | null> {
+    const url = `${this.baseUrl}${path}`;
+    return this.post<ReqBody, ResBody>(url, data, options, 0);
+  }
+}

packages/sdks/sdk/src/index.ts

@@ -0,0 +1,199 @@
+import { Api } from './api';
+
+export type TrackHandlerPayload =
+  | {
+      type: 'track';
+      payload: TrackPayload;
+    }
+  | {
+      type: 'increment';
+      payload: IncrementPayload;
+    }
+  | {
+      type: 'decrement';
+      payload: DecrementPayload;
+    }
+  | {
+      type: 'alias';
+      payload: AliasPayload;
+    }
+  | {
+      type: 'identify';
+      payload: IdentifyPayload;
+    };
+
+export type TrackPayload = {
+  name: string;
+  properties?: Record<string, unknown>;
+  profileId?: string;
+};
+
+export type TrackProperties = {
+  [key: string]: unknown;
+  profileId?: string;
+};
+
+export type IdentifyPayload = {
+  profileId: string;
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  avatar?: string;
+  properties?: Record<string, unknown>;
+};
+
+export type AliasPayload = {
+  profileId: string;
+  alias: string;
+};
+
+export type IncrementPayload = {
+  profileId: string;
+  property: string;
+  value?: number;
+};
+
+export type DecrementPayload = {
+  profileId: string;
+  property: string;
+  value?: number;
+};
+
+export type OpenPanelOptions = {
+  clientId: string;
+  clientSecret?: string;
+  apiUrl?: string;
+  sdk?: string;
+  sdkVersion?: string;
+  waitForProfile?: boolean;
+  filter?: (payload: TrackHandlerPayload) => boolean;
+};
+
+export class OpenPanel {
+  api: Api;
+  profileId?: string;
+  global?: Record<string, any>;
+  queue: TrackHandlerPayload[] = [];
+
+  constructor(public options: OpenPanelOptions) {
+    const defaultHeaders: Record<string, string> = {
+      'openpanel-client-id': options.clientId,
+    };
+
+    if (options.clientSecret) {
+      defaultHeaders['openpanel-client-secret'] = options.clientSecret;
+    }
+
+    defaultHeaders['openpanel-sdk'] = options.sdk || 'node';
+    defaultHeaders['openpanel-sdk-version'] =
+      options.sdkVersion || process.env.SDK_VERSION!;
+
+    this.api = new Api({
+      baseUrl: options.apiUrl || 'https://api.openpanel.dev',
+      defaultHeaders,
+    });
+  }
+
+  init() {
+    // empty
+  }
+
+  ready() {
+    this.options.waitForProfile = false;
+    this.flush();
+  }
+
+  async send(payload: TrackHandlerPayload) {
+    if (this.options.filter && !this.options.filter(payload)) {
+      return Promise.resolve();
+    }
+
+    if (this.options.waitForProfile && !this.profileId) {
+      this.queue.push(payload);
+      return Promise.resolve();
+    }
+    return this.api.fetch('/track', payload);
+  }
+
+  setGlobalProperties(properties: Record<string, any>) {
+    this.global = {
+      ...this.global,
+      ...properties,
+    };
+  }
+
+  async track(name: string, properties?: TrackProperties) {
+    return this.send({
+      type: 'track',
+      payload: {
+        name,
+        profileId: properties?.profileId ?? this.profileId,
+        properties: {
+          ...(this.global ?? {}),
+          ...(properties ?? {}),
+        },
+      },
+    });
+  }
+
+  async identify(payload: IdentifyPayload) {
+    if (payload.profileId) {
+      this.profileId = payload.profileId;
+      this.flush();
+    }
+
+    if (Object.keys(payload).length > 1) {
+      return this.send({
+        type: 'identify',
+        payload: {
+          ...payload,
+          properties: {
+            ...this.global,
+            ...payload.properties,
+          },
+        },
+      });
+    }
+  }
+
+  async alias(payload: AliasPayload) {
+    return this.send({
+      type: 'alias',
+      payload,
+    });
+  }
+
+  async increment(payload: IncrementPayload) {
+    return this.send({
+      type: 'increment',
+      payload,
+    });
+  }
+
+  async decrement(payload: DecrementPayload) {
+    return this.send({
+      type: 'decrement',
+      payload,
+    });
+  }
+
+  clear() {
+    this.profileId = undefined;
+    // session end?
+  }
+
+  flush() {
+    this.queue.forEach((item) => {
+      this.send({
+        ...item,
+        // Not user why ts-expect-error is needed here
+        // @ts-expect-error
+        payload: {
+          ...item.payload,
+          profileId: this.profileId,
+        },
+      });
+    });
+    this.queue = [];
+  }
+}

packages/sdks/web/index.ts

@@ -1,165 +1,2 @@
-/* eslint-disable @typescript-eslint/unbound-method */
-
-import type { OpenpanelSdkOptions, PostEventPayload } from '@openpanel/sdk';
-import { OpenpanelSdk } from '@openpanel/sdk';
-
-export * from '@openpanel/sdk';
-
-export type OpenpanelOptions = OpenpanelSdkOptions & {
-  trackOutgoingLinks?: boolean;
-  trackScreenViews?: boolean;
-  trackAttributes?: boolean;
-  hash?: boolean;
-};
-
-function toCamelCase(str: string) {
-  return str.replace(/([-_][a-z])/gi, ($1) =>
-    $1.toUpperCase().replace('-', '').replace('_', '')
-  );
-}
-
-export class Openpanel extends OpenpanelSdk<OpenpanelOptions> {
-  private lastPath = '';
-  private debounceTimer: any;
-
-  constructor(options: OpenpanelOptions) {
-    super(options);
-
-    if (!this.isServer()) {
-      this.setGlobalProperties({
-        __referrer: document.referrer,
-      });
-
-      if (this.options.trackOutgoingLinks) {
-        this.trackOutgoingLinks();
-      }
-
-      if (this.options.trackScreenViews) {
-        this.trackScreenViews();
-      }
-
-      if (this.options.trackAttributes) {
-        this.trackAttributes();
-      }
-    }
-  }
-
-  private debounce(func: () => void, delay: number) {
-    clearTimeout(this.debounceTimer);
-    this.debounceTimer = setTimeout(func, delay);
-  }
-
-  private isServer() {
-    return typeof document === 'undefined';
-  }
-
-  public trackOutgoingLinks() {
-    if (this.isServer()) {
-      return;
-    }
-
-    document.addEventListener('click', (event) => {
-      const target = event.target as HTMLElement;
-      const link = target.closest('a');
-      if (link && target) {
-        const href = link.getAttribute('href');
-        if (href?.startsWith('http')) {
-          super.event('link_out', {
-            href,
-            text:
-              link.innerText ||
-              link.getAttribute('title') ||
-              target.getAttribute('alt') ||
-              target.getAttribute('title'),
-          });
-        }
-      }
-    });
-  }
-
-  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', function () {
-      window.dispatchEvent(new Event('locationchange'));
-    });
-
-    const eventHandler = () => this.debounce(() => this.screenView(), 50);
-
-    if (this.options.hash) {
-      window.addEventListener('hashchange', eventHandler);
-    } else {
-      window.addEventListener('locationchange', eventHandler);
-    }
-
-    // give time for setProfile to be called
-    setTimeout(() => eventHandler(), 50);
-  }
-
-  public trackAttributes() {
-    if (this.isServer()) {
-      return;
-    }
-
-    document.addEventListener('click', (event) => {
-      const target = event.target as HTMLElement;
-      const btn = target.closest('button');
-      const anchor = target.closest('a');
-      const element = btn?.getAttribute('data-event')
-        ? btn
-        : anchor?.getAttribute('data-event')
-          ? anchor
-          : null;
-      if (element) {
-        const properties: Record<string, unknown> = {};
-        for (const attr of element.attributes) {
-          if (attr.name.startsWith('data-') && attr.name !== 'data-event') {
-            properties[toCamelCase(attr.name.replace(/^data-/, ''))] =
-              attr.value;
-          }
-        }
-        const name = element.getAttribute('data-event');
-        if (name) {
-          super.event(name, properties);
-        }
-      }
-    });
-  }
-
-  public screenView(properties?: PostEventPayload['properties']): void {
-    if (this.isServer()) {
-      return;
-    }
-
-    const path = window.location.href;
-
-    if (this.lastPath === path) {
-      return;
-    }
-
-    this.lastPath = path;
-    super.event('screen_view', {
-      ...(properties ?? {}),
-      __path: path,
-      __title: document.title,
-    });
-  }
-}
+export * from './src/index';
+export * from './src/types.d';

packages/sdks/web/package.json

@@ -4,7 +4,7 @@
   "module": "index.ts",
   "scripts": {
     "build": "rm -rf dist && tsup",
-    "build-for-openpanel": "pnpm build && cp dist/cdn.global.js ../../../apps/public/public/op.js",
+    "build-for-openpanel": "pnpm build && cp dist/src/tracker.global.js ../../../apps/public/public/tracker.js",
     "lint": "eslint .",
     "format": "prettier --check \"**/*.{mjs,ts,md,json}\"",
     "typecheck": "tsc --noEmit"
@@ -16,6 +16,7 @@
     "@openpanel/eslint-config": "workspace:*",
     "@openpanel/prettier-config": "workspace:*",
     "@openpanel/tsconfig": "workspace:*",
+    "@types/node": "^20.14.12",
     "eslint": "^8.48.0",
     "prettier": "^3.0.3",
     "tsup": "^7.2.0",

packages/sdks/web/src/index.ts

@@ -0,0 +1,185 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import type {
+  OpenPanelOptions as OpenPanelBaseOptions,
+  TrackProperties,
+} from '@openpanel/sdk';
+import { OpenPanel as OpenPanelBase } from '@openpanel/sdk';
+
+export * from '@openpanel/sdk';
+
+export type OpenPanelOptions = OpenPanelBaseOptions & {
+  trackOutgoingLinks?: boolean;
+  trackScreenViews?: boolean;
+  trackAttributes?: boolean;
+  trackHashChanges?: boolean;
+};
+
+function toCamelCase(str: string) {
+  return str.replace(/([-_][a-z])/gi, ($1) =>
+    $1.toUpperCase().replace('-', '').replace('_', '')
+  );
+}
+
+export class OpenPanel extends OpenPanelBase {
+  private lastPath = '';
+  private debounceTimer: any;
+
+  constructor(public options: OpenPanelOptions) {
+    super({
+      ...options,
+      sdk: 'web',
+      sdkVersion: process.env.WEB_VERSION!,
+    });
+
+    if (!this.isServer()) {
+      this.setGlobalProperties({
+        __referrer: document.referrer,
+      });
+
+      if (this.options.trackScreenViews) {
+        this.trackScreenViews();
+      }
+
+      if (this.options.trackOutgoingLinks) {
+        this.trackOutgoingLinks();
+      }
+
+      if (this.options.trackAttributes) {
+        this.trackAttributes();
+      }
+    }
+  }
+
+  private debounce(func: () => void, delay: number) {
+    clearTimeout(this.debounceTimer);
+    this.debounceTimer = setTimeout(func, delay);
+  }
+
+  private isServer() {
+    return typeof document === 'undefined';
+  }
+
+  public trackOutgoingLinks() {
+    if (this.isServer()) {
+      return;
+    }
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const link = target.closest('a');
+      if (link && target) {
+        const href = link.getAttribute('href');
+        if (href?.startsWith('http')) {
+          super.track('link_out', {
+            href,
+            text:
+              link.innerText ||
+              link.getAttribute('title') ||
+              target.getAttribute('alt') ||
+              target.getAttribute('title'),
+          });
+        }
+      }
+    });
+  }
+
+  public trackScreenViews() {
+    if (this.isServer()) {
+      return;
+    }
+
+    this.screenView();
+
+    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', function () {
+      window.dispatchEvent(new Event('locationchange'));
+    });
+
+    const eventHandler = () => this.debounce(() => this.screenView(), 50);
+
+    if (this.options.trackHashChanges) {
+      window.addEventListener('hashchange', eventHandler);
+    } else {
+      window.addEventListener('locationchange', eventHandler);
+    }
+  }
+
+  public trackAttributes() {
+    if (this.isServer()) {
+      return;
+    }
+
+    document.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement;
+      const btn = target.closest('button');
+      const anchor = target.closest('a');
+      const element = btn?.getAttribute('data-event')
+        ? btn
+        : anchor?.getAttribute('data-event')
+          ? anchor
+          : null;
+      if (element) {
+        const properties: Record<string, unknown> = {};
+        for (const attr of element.attributes) {
+          if (attr.name.startsWith('data-') && attr.name !== 'data-event') {
+            properties[toCamelCase(attr.name.replace(/^data-/, ''))] =
+              attr.value;
+          }
+        }
+        const name = element.getAttribute('data-event');
+        if (name) {
+          super.track(name, properties);
+        }
+      }
+    });
+  }
+
+  screenView(properties?: TrackProperties): void;
+  screenView(path: string, properties?: TrackProperties): void;
+  screenView(
+    pathOrProperties?: string | TrackProperties,
+    propertiesOrUndefined?: TrackProperties
+  ): void {
+    if (this.isServer()) {
+      return;
+    }
+
+    let path: string;
+    let properties: TrackProperties | undefined;
+
+    if (typeof pathOrProperties === 'string') {
+      path = pathOrProperties;
+      properties = propertiesOrUndefined;
+    } else {
+      path = window.location.href;
+      properties = pathOrProperties;
+    }
+
+    if (this.lastPath === path) {
+      return;
+    }
+
+    this.lastPath = path;
+    super.track('screen_view', {
+      ...(properties ?? {}),
+      __path: path,
+      __title: document.title,
+    });
+  }
+}

packages/sdks/web/src/tracker.ts

@@ -1,20 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-
-import { Openpanel } from './index';
-
-declare global {
-  interface Window {
-    op: {
-      q?: [string, ...any[]];
-      (method: string, ...args: any[]): void;
-    };
-  }
-}
+import { OpenPanel } from './index';
 
 ((window) => {
   if (window.op && 'q' in window.op) {
     const queue = window.op.q || [];
-    const op = new Openpanel(queue.shift()[1]);
+    // @ts-expect-error
+    const op = new OpenPanel(queue.shift()[1]);
     queue.forEach((item) => {
       if (item[0] in op) {
         // @ts-expect-error
@@ -23,13 +13,15 @@ declare global {
     });
 
     window.op = (t, ...args) => {
-      // @ts-expect-error
       const fn = op[t] ? op[t].bind(op) : undefined;
       if (typeof fn === 'function') {
+        // @ts-expect-error
         fn(...args);
       } else {
         console.warn(`op.js: ${t} is not a function`);
       }
     };
+
+    window.openpanel = op;
   }
 })(window);

packages/sdks/web/src/types.d.ts

@@ -0,0 +1,29 @@
+import type { OpenPanel, OpenPanelOptions } from './';
+
+type ExposedMethodsNames =
+  | 'screenView'
+  | 'track'
+  | 'identify'
+  | 'alias'
+  | 'increment'
+  | 'decrement'
+  | 'clear';
+
+export type ExposedMethods = {
+  [K in ExposedMethodsNames]: OpenPanel[K] extends (...args: any[]) => any
+    ? [K, ...Parameters<OpenPanel[K]>]
+    : never;
+}[ExposedMethodsNames];
+
+export type OpenPanelMethodNames = ExposedMethodsNames | 'init';
+export type OpenPanelMethods = ExposedMethods | ['init', OpenPanelOptions];
+
+declare global {
+  interface Window {
+    openpanel?: OpenPanel;
+    op: {
+      q?: OpenPanelMethods[];
+      (...args: OpenPanelMethods): void;
+    };
+  }
+}

packages/sdks/web/tsup.config.ts

@@ -4,6 +4,6 @@ import config from '@openpanel/tsconfig/tsup.config.json' assert { type: 'json'
 
 export default defineConfig({
   ...(config as any),
-  entry: ['index.ts', 'cdn.ts'],
+  entry: ['index.ts', 'src/tracker.ts'],
   format: ['cjs', 'esm', 'iife'],
 });