Rewrite app with astro with preact

.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.astro
+dist

astro.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import tailwind from "@astrojs/tailwind";
+import preact from "@astrojs/preact";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind(), preact({compat: true})]
+});

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}

package.json

@@ -4,31 +4,32 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "start": "vite preview",
+    "dev": "astro dev",
+    "build": "astro build",
+    "start": "astro preview",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
     "test": "vitest"
   },
   "engines": {
     "node": ">=20.11.0"
   },
   "dependencies": {
+    "@astrojs/preact": "^3.5.0",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/inter": "^5.0.18",
     "@fontsource-variable/jetbrains-mono": "^5.0.21",
+    "@testing-library/preact": "^3.2.4",
     "android-fastboot": "github:commaai/fastboot.js#c3ec6fe3c96a48dab46e23d0c8c861af15b2144a",
+    "astro": "^4.10.3",
     "comlink": "^4.4.1",
     "jssha": "^3.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "preact": "^10.22.0",
     "xz-decompress": "^0.2.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.13",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
     "autoprefixer": "10.4.14",
     "eslint": "^8.57.0",
@@ -37,9 +38,7 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "vite": "^5.2.12",
-    "vite-svg-loader": "^5.1.0",
+    "tailwindcss": "^3.4.4",
     "vitest": "^1.6.0"
   }
 }

src/app/Flash.jsx → src/components/Flash.jsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback } from 'preact/hooks'
 
 import { Step, Error, useFastboot } from '@/utils/fastboot'
 
@@ -228,7 +228,7 @@ export default function Flash() {
         onClick={handleContinue}
       >
         <img
-          src={icon}
+          src={icon.src}
           alt="cable"
           width={128}
           height={128}

src/components/LazyFlash.jsx

@@ -0,0 +1,13 @@
+import { Suspense, lazy } from 'preact/compat'
+
+const Flash = lazy(() => import('./Flash'))
+
+export default function LazyFlash() {
+    return (
+        <div className="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
+            <Suspense fallback={<p className="text-black dark:text-white">Loading...</p>}>
+                <Flash />
+            </Suspense>
+      </div>
+    )
+}

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />