[feature] deploy to single file

package-lock.json

@@ -22,7 +22,8 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.3.4",
         "typescript": "^5.0.2",
-        "vite": "^4.3.9"
+        "vite": "^4.3.9",
+        "vite-plugin-singlefile": "^0.13.5"
       }
     },
     "node_modules/@esbuild/android-arm": {
@@ -2499,6 +2500,22 @@
         }
       }
     },
+    "node_modules/vite-plugin-singlefile": {
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-singlefile/-/vite-plugin-singlefile-0.13.5.tgz",
+      "integrity": "sha512-y/aRGh8qHmw2f1IhaI/C6PJAaov47ESYDvUv1am1YHMhpY+19B5k5Odp8P+tgs+zhfvak6QB1ykrALQErEAo7g==",
+      "dev": true,
+      "dependencies": {
+        "micromatch": "^4.0.5"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "rollup": ">=2.79.0",
+        "vite": ">=3.2.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -24,6 +24,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "vite-plugin-singlefile": "^0.13.5"
   }
 }

src/App.tsx

@@ -44,7 +44,6 @@ export default function App() {
   }, []);
 
   useEffect(() => {
-    console.log("====================================");
     setCurrentStates();
   }, [clients, channels, connections, activeConnectionId]);
 

src/teamspeak5Handler.ts

@@ -40,7 +40,7 @@ export class TS5Connection {
         name: "TS5 OBS Overlay",
         description: "A OBS overlay for TS5 by DerTyp876",
         content: {
-          apiKey: localStorage.getItem("apiKey") || "",
+          apiKey: localStorage.getItem("apiKey") ?? "",
         },
       },
     };
@@ -51,6 +51,10 @@ export class TS5Connection {
       this.ws.send(JSON.stringify(initalPayload));
     };
 
+    this.ws.onclose = (event) => {
+      console.log("WebSocket connection closed", event);
+    };
+
     // Handle messages received from TS5 client
     // See TS5MessageHandler class
     this.ws.onmessage = (event) => {

tsconfig.json

@@ -1,36 +1,36 @@
 {
-	"compilerOptions": {
+  "compilerOptions": {
-		"target": "ES2020",
+    "target": "ES2020",
-		"useDefineForClassFields": true,
+    "useDefineForClassFields": true,
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
+    "module": "ESNext",
-		"skipLibCheck": true,
+    "skipLibCheck": true,
 
-		"baseUrl": "./src",
+    "baseUrl": "./src",
 
-		"paths": {
+    "paths": {
-			"@/*": ["/src/*"],
+      "@/*": ["/src/*"],
-			"@components/*": ["/src/components/*"],
+      "@components/*": ["/src/components/*"],
-			"@assets/*": ["/src/assets/*"],
+      "@assets/*": ["/src/assets/*"],
-			"@styles/*": ["/src/styles/*"],
+      "@styles/*": ["/src/styles/*"],
-			"@utils/*": ["/src/utils/*"],
+      "@utils/*": ["/src/utils/*"],
-			"@interfaces/*": ["/src/interfaces/*"]
+      "@interfaces/*": ["/src/interfaces/*"]
-		},
+    },
 
-		/* Bundler mode */
+    /* Bundler mode */
-		"moduleResolution": "bundler",
+    "moduleResolution": "bundler",
-		"allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": true,
-		"resolveJsonModule": true,
+    "resolveJsonModule": true,
-		"isolatedModules": true,
+    "isolatedModules": true,
-		"noEmit": true,
+    "noEmit": true,
-		"jsx": "react-jsx",
+    "jsx": "react-jsx",
 
-		/* Linting */
+    /* Linting */
-		"strict": true,
+    "strict": true,
-		"noUnusedLocals": true,
+    "noUnusedLocals": false,
-		"noUnusedParameters": true,
+    "noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true
-	},
+  },
-	"include": ["src"],
+  "include": ["src"],
-	"references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import { viteSingleFile } from "vite-plugin-singlefile"
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,5 +15,5 @@ export default defineConfig({
       "@utils": "/src/utils",
     },
   },
-  plugins: [react()],
+  plugins: [react(), viteSingleFile({ useRecommendedBuildConfig: false })],
 })