refactor: Replace Webpack with Vite (#53)

src/debug/hotReload.ts

@@ -1,33 +0,0 @@
-import io from 'socket.io-client';
-import { background } from 'src/shared/messages';
-
-const socket = io('http://localhost:9090');
-let reBuilding = false;
-
-socket.on('disconnect', async reason => {
-    reBuilding = reason.includes('transport') && !reason.includes('client');
-});
-
-socket.onAny(args => {
-    console.log(args);
-});
-
-socket.on('connect', async () => {
-    if (!reBuilding) {
-        console.log('%c[hot-reloading] listening for changes...', 'color:white; background-color: orange;');
-    } else {
-        console.log(
-            '%c[hot-reloading] changes detected, rebuilding and refreshing...',
-            'color:white; background-color: orange;'
-        );
-    }
-});
-
-socket.on('reload', async () => {
-    console.log('%c[hot-reloading] reloading...', 'color:white; background-color: orange;');
-    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
-        if (tabs?.[0]?.id) {
-            background.reloadExtension();
-        }
-    });
-});

src/debug/index.tsx

@@ -1,7 +1,6 @@
-import './hotReload';
+import { DevStore } from '@shared/storage/DevStore';
 import React, { useEffect } from 'react';
-import { DevStore } from 'src/shared/storage/DevStore';
-import render from 'src/views/lib/react';
+import { createRoot } from 'react-dom/client';
 
 const manifest = chrome.runtime.getManifest();
 
@@ -146,4 +145,4 @@ function DevDashboard() {
     );
 }
 
-render(<DevDashboard />, document.getElementById('root'));
+createRoot(document.getElementById('root')).render(<DevDashboard />);