perf: change react to preact to decrease bundle size and improve app …

…performance

package.json

@@ -10,20 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@crxjs/vite-plugin": "^2.0.0-beta.15",
-    "@types/chrome": "^0.0.256",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "preact": "^10.19.3"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@crxjs/vite-plugin": "^2.0.0-beta.15",
+    "@types/chrome": "^0.0.256",
+    "@preact/preset-vite": "^2.8.1",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.11"
   }

src/App.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "preact/hooks";
 import './index.css'
 import NoResults from "./components/no-results.tsx";
 import Header from "./components/header.tsx";

src/components/button.tsx

@@ -1,15 +1,15 @@
-import React from "react";
 import './button.css';
+import { FunctionComponent } from "preact";
 
 interface Props {
     onClick: () => void;
-    children: React.ReactElement | string;
+    children: any;
     type?: 'text' | 'primary' | 'secondary';
     className?: string;
     size?: 'small'
 }
 
-const Button: React.FC<Props> = ({ onClick, className, type = 'text', size = '', children }) => {
+const Button: FunctionComponent<Props> = ({ onClick, className, type = 'text', size = '', children }) => {
     return (
         <button className={`btn ${className} ${type} ${size}`} onClick={onClick}>
             {children}

src/main.tsx

@@ -1,10 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { render } from 'preact';
 import App from './App.tsx';
 import './index.css';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+render(<App />, document.getElementById('root')!);

tsconfig.json

@@ -2,9 +2,13 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    },
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -13,6 +17,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "jsxImportSource": "preact",
 
     /* Linting */
     "strict": true,

vite.config.ts

@@ -1,11 +1,11 @@
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import preact from '@preact/preset-vite';
 import { crx } from '@crxjs/vite-plugin';
 import manifest from './manifest.json'
 
 export default defineConfig({
   plugins: [
-      react(),
+      preact(),
       crx({ manifest }),
   ],
 })