@brainfish-ai/web-tracker 0.0.2-alpha.2 → 0.0.4-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brainfish-ai/web-tracker",
-  "version": "0.0.2-alpha.2",
+  "version": "0.0.4-alpha.4",
   "main": "dist/index.js",
   "description": "Brainfish Tracker for Web",
   "private": false,
@@ -22,7 +22,7 @@
     "vite-tsconfig-paths": "^4.2.0"
   },
   "dependencies": {
-    "@brainfish-ai/tracker-sdk": "*",
+    "@brainfish-ai/tracker-sdk": "0.0.1-alpha.2",
     "html-to-image": "^1.11.11",
     "redact-pii": "^3.4.0",
     "rrweb": "^2.0.0-alpha.4"

package/src/index.ts

@@ -1,190 +1,2 @@
-/* eslint-disable @typescript-eslint/unbound-method */
-
-import type {
-  TrackerSdkOptions,
-  TrackProperties,
-} from '@brainfish-ai/tracker-sdk';
-import { TrackerSdk } from '@brainfish-ai/tracker-sdk';
-import { screenshot } from './utils/snapshot';
-
-export type * from '@brainfish-ai/tracker-sdk';
-
-export type TrackerOptions = TrackerSdkOptions & {
-  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 Tracker extends TrackerSdk {
-  private lastPath = '';
-  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
-
-  constructor(public options: TrackerOptions) {
-    super({
-      sdk: 'web',
-      sdkVersion: __PACKAGE_VERSION__,
-      ...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) {
-    this.debounceTimer && 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-track')
-        ? btn
-        : anchor?.getAttribute('data-track')
-          ? anchor
-          : null;
-      if (element) {
-        const properties: Record<string, unknown> = {};
-        for (const attr of element.attributes) {
-          if (attr.name.startsWith('data-') && attr.name !== 'data-track') {
-            properties[toCamelCase(attr.name.replace(/^data-/, ''))] =
-              attr.value;
-          }
-        }
-        const name = element.getAttribute('data-track');
-        if (name) {
-          super.track(name, properties);
-        }
-      }
-    });
-  }
-
-  async screenView(properties?: TrackProperties): Promise<void>;
-  async screenView(path: string, properties?: TrackProperties): Promise<void>;
-  async screenView(
-    pathOrProperties?: string | TrackProperties,
-    propertiesOrUndefined?: TrackProperties,
-  ): Promise<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;
-    }
-
-    // capture screenshot
-    const snapshot = await screenshot();
-
-    this.lastPath = path;
-    super.track('screen_view', {
-      ...(properties ?? {}),
-      screenshot: snapshot,
-      __path: path,
-      __title: document.title,
-    });
-  }
-}
+export * from './tracker';
+export * from './types.d';

package/src/tracker.ts

@@ -0,0 +1,192 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+
+import type {
+    TrackerSdkOptions,
+    TrackProperties,
+  } from '@brainfish-ai/tracker-sdk';
+  import { TrackerSdk } from '@brainfish-ai/tracker-sdk';
+  import { screenshot } from './utils/snapshot';
+  
+  export type * from '@brainfish-ai/tracker-sdk';
+  
+  export type TrackerOptions = TrackerSdkOptions & {
+    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 Tracker extends TrackerSdk {
+    private lastPath = '';
+    private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+      static mock: any;
+  
+    constructor(public options: TrackerOptions) {
+      super({
+        sdk: 'web',
+        sdkVersion: __PACKAGE_VERSION__,
+        ...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) {
+      this.debounceTimer && 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-track')
+          ? btn
+          : anchor?.getAttribute('data-track')
+            ? anchor
+            : null;
+        if (element) {
+          const properties: Record<string, unknown> = {};
+          for (const attr of element.attributes) {
+            if (attr.name.startsWith('data-') && attr.name !== 'data-track') {
+              properties[toCamelCase(attr.name.replace(/^data-/, ''))] =
+                attr.value;
+            }
+          }
+          const name = element.getAttribute('data-track');
+          if (name) {
+            super.track(name, properties);
+          }
+        }
+      });
+    }
+  
+    async screenView(properties?: TrackProperties): Promise<void>;
+    async screenView(path: string, properties?: TrackProperties): Promise<void>;
+    async screenView(
+      pathOrProperties?: string | TrackProperties,
+      propertiesOrUndefined?: TrackProperties,
+    ): Promise<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;
+      }
+  
+      // capture screenshot
+      const snapshot = await screenshot();
+  
+      this.lastPath = path;
+      super.track('screen_view', {
+        ...(properties ?? {}),
+        screenshot: snapshot,
+        __path: path,
+        __title: document.title,
+      });
+    }
+  }
+  

package/src/types.d.ts

@@ -0,0 +1,31 @@
+import type { Tracker, TrackerOptions, TrackProperties } from "./index";
+
+type ExposedMethodsNames =
+  | 'track'
+  | 'identify'
+  | 'setGlobalProperties'
+  | 'alias'
+  | 'increment'
+  | 'decrement'
+  | 'clear';
+
+  export type ExposedMethods = {
+    [K in ExposedMethodsNames]: Tracker[K] extends (...args: any[]) => any
+      ? [K, ...Parameters<Tracker[K]>]
+      : never;
+  }[ExposedMethodsNames];
+  
+  export type TrackerMethodNames = ExposedMethodsNames | 'init' | 'screenView';
+  export type TrackerMethods =
+    | ExposedMethods
+    | ['init', TrackerOptions]
+    | ['screenView', string | TrackProperties, TrackProperties];
+
+declare global {
+  interface Window {
+    BrainfishAnalytics: {
+      q?: [string, ...any[]];
+      (method: string, ...args: any[]): void;
+    };
+  }
+}