initial for v1

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