change base paths

.gitignore

@@ -1 +1,3 @@
-/node_modules
+/node_modules
+.vscode
+dist

package.json

@@ -2,9 +2,14 @@
   "name": "react-ts5-remote-app-api",
   "version": "1.0.0",
   "description": "React hook/api for the TeamSpeak5 remote app feature",
-  "main": "app.js",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
   "scripts": {
-    "build": "tsc"
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --target esnext --outDir dist/cjs",
+    "prepare": "npm run build"
   },
   "keywords": [
     "TeamSpeak5",
@@ -23,6 +28,15 @@
     "@types/react": "^18.2.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tslib": "^2.6.0",
     "typescript": "^5.1.6"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "tsconfig-paths": "^4.2.0"
   }
 }

src/handlers/teamspeak/connectionHandler.ts

@@ -1,7 +1,7 @@
-import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "@interfaces/teamspeak";
+import { IAuthSenderPayload, IChannel, IClient, IConnection, ITS5ConnectionHandler, ITS5DataHandler, ITS5MessageHandler } from "../../interfaces/teamspeak";
 import { TS5DataHandler } from "./dataHandler";
 import { TS5MessageHandler } from "./messageHandler";
-import Logger from "@/utils/logger";
+import Logger from "../../utils/logger";
 
 
 // Establish connection to TS5 client

src/handlers/teamspeak/dataHandler.ts

@@ -1,5 +1,5 @@
-import Logger from "@/utils/logger";
-import { IConnection, IChannel, IClient, ITS5DataHandler } from "@interfaces/teamspeak";
+import Logger from "../..//utils/logger";
+import { IConnection, IChannel, IClient, ITS5DataHandler } from "../../interfaces/teamspeak";
 
 
 /**

src/handlers/teamspeak/messageHandler.ts

@@ -1,5 +1,5 @@
-import Logger from "@/utils/logger";
-import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler } from "@interfaces/teamspeak";
+import Logger from "../../utils/logger";
+import { IChannelInfos, IConnection, IChannel, IAuthMessage, IClientInfo, IClientMovedMessage, IClient, IClientPropertiesUpdatedMessage, ITalkStatusChangedMessage, IClientSelfPropertyUpdatedMessage, IServerPropertiesUpdatedMessage, IConnectStatusChangedMessage, IChannelsMessage, ITS5MessageHandler, ITS5DataHandler } from "../../interfaces/teamspeak";
 
 // Handle incoming messages from TS5 client
 export class TS5MessageHandler implements ITS5MessageHandler {

src/hooks/useTSRemoteApp.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { TS5ConnectionHandler } from "@/handlers/teamspeak/connectionHandler";
-import { IClient, IChannel, IConnection, ITS5ConnectionHandler } from "@/interfaces/teamspeak";
+import { TS5ConnectionHandler } from "../handlers/teamspeak/connectionHandler";
+import { IClient, IChannel, IConnection, ITS5ConnectionHandler } from "../interfaces/teamspeak";
 import { useEffect, useState } from "react";
 
 export default function useTSRemoteApp({ remoteAppPort = 5899 }: { remoteAppPort: number }) {

src/utils/logger.tsx

@@ -0,0 +1,31 @@
+export default class Logger {
+  // Log message to the console
+  public static log(message: string, data: object | null = null): void {
+    console.log(`[Log] %c${message}`.trim(), "color: gray", data ?? "");
+  }
+
+  // Log warning to the console
+  public static warn(message: string, data: object | null = null): void {
+    console.warn(`%c${message}`.trim(), data ?? "");
+  }
+
+  // Log error to the console
+  public static error(message: string, data: object | null = null): void {
+    console.error(`%c${message}`.trim(), data ?? "");
+  }
+
+  // Log message received from the websocket to the console
+  public static wsReceived(data: object, message: string | undefined = undefined): void {
+    console.log(`%c[WS Recieved] ${message ?? ""}`.trim(), "color: #8258c7", data);
+  }
+
+  // Log message sent to the websocket to the console
+  public static wsSent(data: object, message: string | undefined = undefined): void {
+    console.log(`%c[WS Sent] ${message ?? ""}`.trim(), "color: #4eb570", data);
+  }
+
+  // Log message to the console with a timestamp
+  public static ts(message: string, data: object | null = null): void {
+    console.log(`%c[TS] ${message}`.trim(), "color: #2e6bc7", data ?? "");
+  }
+}

tsconfig.json

@@ -18,14 +18,6 @@
     "jsx": "react",
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-      "@assets/*": ["src/assets/*"],
-      "@utils/*": ["src/utils/*"],
-      "@interfaces/*": ["src/interfaces/*"],
-      "@handlers/*": ["src/handlers/*"]
-    }
+    "forceConsistentCasingInFileNames": true
   }
 }