chore(build): migrate to vite

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     browser: true,
   },
   rules: {
-    "@typescript-eslint/no-magic-numbers": "off"
-  }
+    '@typescript-eslint/no-magic-numbers': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+  },
 };

.github/workflows/main.yml

@@ -8,10 +8,10 @@ jobs:
       CI_JOB_NUMBER: 1
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 16.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn lint-test
 
@@ -21,9 +21,9 @@ jobs:
       CI_JOB_NUMBER: 2
     steps:
       - uses: actions/checkout@v1
-      - name: Use Node.js 16.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn build

.github/workflows/npm-publish.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: yarn
       - run: yarn lint-test

.nvmrc

@@ -0,0 +1 @@
+v20.18.0

package.json

@@ -2,12 +2,22 @@
   "name": "@hawk.so/javascript",
   "version": "3.0.9",
   "description": "JavaScript errors tracking for Hawk.so",
-  "main": "./dist/hawk.js",
-  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/hawk.umd.js",
+  "module": "./dist/hawk.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/hawk.mjs",
+      "require": "./dist/hawk.umd.js"
+    }
+  },
   "scripts": {
-    "dev": "webpack-dev-server --config ./webpack.config.dev.js",
-    "build": "webpack && yarn stats",
-    "size-build": "webpack && yarn stats",
+    "dev": "vite",
+    "build": "vite build",
     "stats": "size-limit > stats.txt",
     "lint": "eslint -c ./.eslintrc.js src/ --ext .ts,.js --fix",
     "lint-test": "eslint -c ./.eslintrc.js src/ --ext .ts,.js"
@@ -26,24 +36,18 @@
   },
   "homepage": "https://github.com/codex-team/hawk.javascript#readme",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-transform-async-to-generator": "^7.8.3",
-    "@babel/preset-env": "^7.9.6",
-    "@size-limit/preset-small-lib": "^4.5.0",
-    "babel-loader": "^8.1.0",
+    "@size-limit/preset-small-lib": "^11.1.6",
     "eslint": "^7.24.0",
     "eslint-config-codex": "^1.6.1",
-    "regenerator-runtime": "^0.13.5",
-    "size-limit": "^4.5.0",
-    "ts-loader": "^7.0.3",
-    "typescript": "^3.8.3",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.2.1"
+    "rollup-plugin-license": "^3.5.3",
+    "size-limit": "^11.1.6",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vue": "^2"
   },
   "dependencies": {
-    "@hawk.so/types": "^0.1.13",
-    "error-stack-parser": "^2.0.6"
+    "@hawk.so/types": "^0.1.20",
+    "error-stack-parser": "^2.1.4",
+    "vite-plugin-dts": "^4.2.4"
   }
 }

src/catcher.ts

@@ -2,18 +2,17 @@ import Socket from './modules/socket';
 import Sanitizer from './modules/sanitizer';
 import log from './modules/logger';
 import StackParser from './modules/stackParser';
-import { HawkInitialSettings } from './types/hawk-initial-settings';
-import CatcherMessage from './types/catcher-message';
+import type { CatcherMessage, HawkInitialSettings } from '@/types';
 import { VueIntegration } from './integrations/vue';
 import { generateRandomId } from './utils';
-import {
+import type {
   AffectedUser,
   EventContext,
   JavaScriptAddons,
   VueIntegrationAddons,
   Json, EncodedIntegrationToken, DecodedIntegrationToken
 } from '@hawk.so/types';
-import { JavaScriptCatcherIntegrations } from './types/integrations';
+import type { JavaScriptCatcherIntegrations } from './types/integrations';
 import { EventRejectedError } from './errors';
 import type { HawkJavaScriptEvent } from './types';
 
@@ -52,7 +51,7 @@ export default class Catcher {
   /**
    * Current bundle version
    */
-  private readonly release: string;
+  private readonly release: string | undefined;
 
   /**
    * Current authenticated user
@@ -62,13 +61,13 @@ export default class Catcher {
   /**
    * Any additional data passed by user for sending with all messages
    */
-  private readonly context: EventContext;
+  private readonly context: EventContext | undefined;
 
   /**
    * This Method allows developer to filter any data you don't want sending to Hawk
    * If method returns false, event will not be sent
    */
-  private readonly beforeSend: (event: HawkJavaScriptEvent) => HawkJavaScriptEvent | false;
+  private readonly beforeSend: undefined | ((event: HawkJavaScriptEvent) => HawkJavaScriptEvent | false);
 
   /**
    * Transport for dialog between Catcher and Collector
@@ -180,7 +179,7 @@ export default class Catcher {
    * @param [context] - any additional data to send
    */
   public send(message: Error | string, context?: EventContext): void {
-    this.formatAndSend(message, undefined, context);
+    void this.formatAndSend(message, undefined, context);
   }
 
   /**
@@ -191,7 +190,7 @@ export default class Catcher {
   public connectVue(vue): void {
     // eslint-disable-next-line no-new
     new VueIntegration(vue, (error: Error, addons: VueIntegrationAddons) => {
-      this.formatAndSend(error, {
+      void this.formatAndSend(error, {
         vue: addons,
       });
     }, {
@@ -229,7 +228,7 @@ export default class Catcher {
       error = (event as ErrorEvent).message;
     }
 
-    this.formatAndSend(error);
+    void this.formatAndSend(error);
   }
 
   /**
@@ -492,18 +491,16 @@ export default class Catcher {
    *
    * @param {Error|string} error — caught error
    */
-  private getRawData(error: Error | string): Json {
-    let errorData = null;
-
-    if (error instanceof Error) {
-      errorData = {
-        name: error.name,
-        message: error.message,
-        stack: error.stack,
-      };
+  private getRawData(error: Error | string): Json | undefined {
+    if (!(error instanceof Error)) {
+      return;
     }
 
-    return errorData;
+    return {
+      name: error.name,
+      message: error.message,
+      stack: error.stack ?? '',
+    };
   }
 
   /**

src/index.ts

@@ -1,6 +1,5 @@
-import 'regenerator-runtime/runtime';
 import Catcher from './catcher';
-export { AffectedUser } from '@hawk.so/types';
+export type { AffectedUser } from '@hawk.so/types';
 export * from './types';
 
 export default Catcher;

src/integrations/vue.ts

@@ -1,5 +1,5 @@
 import Sanitizer from './../modules/sanitizer';
-import { VueIntegrationAddons } from '@hawk.so/types';
+import type { VueIntegrationAddons } from '@hawk.so/types';
 
 interface VueIntegrationOptions {
   /**
@@ -31,7 +31,7 @@ export class VueIntegration {
    * Callback that should be triggered with caught error.
    * This callback is used by parent class to format and send an event.
    */
-  private readonly callback: (error: Error, addons: {[key: string]: any}) => void;
+  private readonly callback: (error: Error, addons: VueIntegrationAddons) => void;
 
   /**
    * Set up a new vue app
@@ -63,7 +63,7 @@ export class VueIntegration {
        * @param vm - vue VM
        * @param info - a Vue-specific error info, e.g. which lifecycle hook the error was found in.
        */
-      (err: Error, vm: { [key: string]: any }, info: string): void => {
+      (err: Error, vm:  {[key: string]: unknown}, info: string): void => {
         if (typeof this.existedHandler === 'function') {
           this.existedHandler.call(this.vue, err, vm, info);
         }
@@ -82,7 +82,8 @@ export class VueIntegration {
    * @param vm - vue VM
    * @param info - a Vue-specific error info, e.g. which lifecycle hook the error was found in.
    */
-  private spoilAddons(vm: {[key: string]: any}, info: string): VueIntegrationAddons {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private spoilAddons(vm: { [key: string]: any }, info: string): VueIntegrationAddons {
     const addons: VueIntegrationAddons = {
       lifecycle: info,
       component: null,
@@ -111,7 +112,7 @@ export class VueIntegration {
       addons.data = {};
 
       Object.entries(vm._data).forEach(([key, value]) => {
-        addons.data[key] = Sanitizer.sanitize(value);
+        addons.data![key] = Sanitizer.sanitize(value);
       });
     }
 
@@ -122,7 +123,8 @@ export class VueIntegration {
       addons.computed = {};
 
       Object.entries(vm._computedWatchers).forEach(([key, watcher]) => {
-        addons.computed[key] = Sanitizer.sanitize((watcher as {[key: string]: any}).value);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        addons.computed![key] = Sanitizer.sanitize((watcher as {[key: string]: any}).value);
       });
     }
 
@@ -136,7 +138,13 @@ export class VueIntegration {
    * @param info - a Vue-specific error info, e.g. which lifecycle hook the error was found in.
    * @param component - where error was occurred
    */
-  private printError(err: Error, info: string, component: string): void {
+  private printError(err: Error, info: string, component: string | null): void {
+    if (component === null) {
+      console.error(`${info}`, err);
+
+      return;
+    }
+
     console.error(`${component} @ ${info}`, err);
   }
 }

src/modules/socket.ts

@@ -1,5 +1,5 @@
 import log from './logger';
-import CatcherMessage from '../types/catcher-message';
+import type { CatcherMessage } from '@/types';
 
 /**
  * Custom WebSocket wrapper class
@@ -36,7 +36,7 @@ export default class Socket {
   /**
    * Websocket instance
    */
-  private ws: WebSocket;
+  private ws: WebSocket | null;
 
   /**
    * Reconnection tryings Timeout
@@ -60,7 +60,7 @@ export default class Socket {
    */
   constructor({
     collectorEndpoint,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-unused-vars-experimental,no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onMessage = (message: MessageEvent): void => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onClose = (): void => {},
@@ -187,7 +187,7 @@ export default class Socket {
       }
 
       this.reconnectionTimer = setTimeout(() => {
-        this.reconnect(true);
+        void this.reconnect(true);
       }, this.reconnectionTimeout);
     }
   }
@@ -197,7 +197,13 @@ export default class Socket {
    */
   private sendQueue(): void {
     while (this.eventsQueue.length) {
-      this.send(this.eventsQueue.shift())
+      const event = this.eventsQueue.shift();
+
+      if (!event) {
+        continue;
+      }
+
+      this.send(event)
         .catch((sendingError) => {
           log('WebSocket sending error', 'error', sendingError);
         });