replace react with preact

web/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "devDependencies": {
+    "@preact/preset-vite": "^2.6.0",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
@@ -13,10 +14,9 @@
   },
   "dependencies": {
     "@filedrop/types": "*",
-    "@types/react": "18.0.18",
-    "@types/react-dom": "18.0.4",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
     "@types/uuid": "^9.0.3",
-    "@vitejs/plugin-react": "^4.0.3",
     "base64-js": "^1.5.1",
     "clsx": "^2.0.0",
     "eslint-config-react-app": "^7.0.1",
@@ -28,6 +28,8 @@
     "mobx": "^6.10.2",
     "mobx-react-lite": "^4.0.5",
     "nanoanim": "^0.1.0",
+    "preact": "^10.18.1",
+    "preact-compat": "^3.19.0",
     "pwanow": "^0.0.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",

web/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import preact from '@preact/preset-vite';
 import buildInfo from 'vite-plugin-info';
 
 export default defineConfig(({ mode }) => ({
@@ -10,15 +10,12 @@ export default defineConfig(({ mode }) => ({
       clientPort: 3001,
     },
   },
-  resolve:
-    mode === 'production'
-      ? {
-          // Enables MobX production build
-          mainFields: ['jsnext:main', 'module', 'main'],
-        }
-      : undefined,
+  resolve: {
+    mainFields:
+      mode === 'production' ? ['jsnext:main', 'module', 'main'] : undefined,
+  },
   build: {
     outDir: './build',
   },
-  plugins: [buildInfo(), react()],
+  plugins: [buildInfo(), preact()],
 }));