commaai · adeebshihadeh · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024 · Jun 1, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,48 @@
 {
-  "extends": "next/core-web-vitals"
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended"
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    "dist",
+    ".eslintrc.cjs"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "plugins": [
+    "react-refresh"
+  ],
+  "rules": {
+    "no-constant-condition": [
+      "error",
+      {
+        "checkLoops": false
+      }
+    ],
+    "no-inner-declarations": "off",
+    "react/jsx-no-target-blank": "off",
+    "react/prop-types": "off",
+    "react-refresh/only-export-components": [
+      "warn",
+      {
+        "allowConstantExport": true
+      }
+    ]
+  }
 }
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -16,24 +16,16 @@ concurrency:
 jobs:
   build:
     runs-on: ubuntu-latest
-    env:
-      NEXT_CONFIG_OUTPUT: export
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-        with:
-          static_site_generator: next
-      - name: Install dependencies
-        run: bun install
-      - name: Build with Next.js
-        run: bun run build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+
+      - run: bun install
+      - run: bun run build
+
+      - uses: actions/upload-pages-artifact@v3
         with:
-          path: ./out
+          path: ./dist
 
   deploy:
     environment:

diff --git a/README.md b/README.md
@@ -6,13 +6,11 @@ This tool allows you to flash AGNOS onto your comma device. Uses a fork of [fast
 
 ## Development
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
 ```bash
 bun install
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `src/app/index.jsx`. The page auto-updates as you edit the file.
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/app/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Update your comma device to the latest software"
+    />
+    <title>flash.comma.ai</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    <script
+      defer
+      data-domain="flash.comma.ai"
+      src="https://plausible.io/js/script.outbound-links.js"
+    ></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
diff --git a/next.config.js b/next.config.js
diff --git a/package.json b/package.json
@@ -2,39 +2,44 @@
   "name": "@commaai/flash",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "vite",
+    "build": "vite build",
+    "start": "vite preview",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
+    "test": "vitest"
   },
-  "packageManager": "bun",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.11.0"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.18",
+    "@fontsource-variable/jetbrains-mono": "^5.0.21",
     "android-fastboot": "github:commaai/fastboot.js#c3ec6fe3c96a48dab46e23d0c8c861af15b2144a",
-    "autoprefixer": "10.4.14",
     "comlink": "^4.4.1",
-    "eslint": "8.40.0",
-    "eslint-config-next": "13.4.1",
     "jssha": "^3.3.1",
-    "next": "13.4.1",
-    "next-plausible": "^3.10.1",
-    "postcss": "8.4.24",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "3.3.2",
-    "web-vitals": "^3.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "xz-decompress": "^0.2.1"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@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",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "jsdom": "^22.1.0",
-    "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.34.2"
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "vite": "^5.2.12",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^1.6.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

diff --git a/src/app/App.test.jsx b/src/app/App.test.jsx
@@ -2,9 +2,9 @@ import { Suspense } from 'react'
 import { expect, test } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-import Page from './page';
+import App from '.'
 
 test('renders without crashing', () => {
-  render(<Suspense fallback="loading"><Page /></Suspense>)
+  render(<Suspense fallback="loading"><App /></Suspense>)
   expect(screen.getByText('flash.comma.ai')).toBeInTheDocument()
 })
diff --git a/src/app/Flash.jsx b/src/app/Flash.jsx
@@ -1,6 +1,4 @@
-'use client'
 import { useCallback } from 'react'
-import Image from 'next/image'
 
 import { Step, Error, useFastboot } from '@/utils/fastboot'
 
@@ -229,7 +227,7 @@ export default function Flash() {
         style={{ cursor: onContinue ? 'pointer' : 'default' }}
         onClick={handleContinue}
       >
-        <Image
+        <img
           src={icon}
           alt="cable"
           width={128}

diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/page.jsx → src/app/index.jsx b/src/app/page.jsx → src/app/index.jsx
@@ -1,25 +1,20 @@
-'use client'
-import dynamic from 'next/dynamic'
-import Image from 'next/image'
+import { Suspense, lazy } from 'react'
 
-import comma from '@/assets/comma.svg'
-import fastbootPorts from '@/assets/fastboot-ports.svg'
-import zadigCreateNewDevice from '@/assets/zadig_create_new_device.png'
-import zadigForm from '@/assets/zadig_form.png'
+import comma from '../assets/comma.svg'
+import fastbootPorts from '../assets/fastboot-ports.svg'
+import zadigCreateNewDevice from '../assets/zadig_create_new_device.png'
+import zadigForm from '../assets/zadig_form.png'
 
-const Flash = dynamic(() => import('./Flash'), {
-  loading: () => <p className="text-black dark:text-white">Loading...</p>,
-  ssr: false,
-})
+const Flash = lazy(() => import('./Flash'))
 
-export default function Home() {
-  const version = process.env.NEXT_PUBLIC_GIT_SHA || 'dev'
+export default function App() {
+  const version = import.meta.env.VITE_PUBLIC_GIT_SHA || 'dev'
   console.info(`flash.comma.ai version: ${version}`);
   return (
     <div className="flex flex-col lg:flex-row flex-wrap">
       <main className="p-12 md:p-16 lg:p-20 xl:p-24 w-screen max-w-none lg:max-w-prose lg:w-auto h-auto lg:h-screen lg:overflow-y-auto prose dark:prose-invert prose-green bg-white dark:bg-gray-900">
         <section>
-          <Image src={comma} alt="comma" width={128} height={128} className="dark:invert" />
+          <img src={comma} alt="comma" width={128} height={128} className="dark:invert" />
           <h1>flash.comma.ai</h1>
 
           <p>This tool allows you to flash AGNOS onto your comma device.</p>
@@ -47,33 +42,33 @@ export default function Home() {
           <p>
             You need additional driver software for Windows before you connect
             your device.
-            <ol>
-              <li>
-                Download and install <a href="https://zadig.akeo.ie/">Zadig</a>.
-              </li>
-              <li>
-                Under <code>Device</code> in the menu bar, select <code>Create New Device</code>.
-                <Image
-                  src={zadigCreateNewDevice}
-                  alt="Zadig Create New Device"
-                  width={575}
-                  height={254}
-                />
-              </li>
-              <li>
-                Fill in three fields. The first field is just a description and
-                you can fill in anything.  The next two fields are very important.
-                Fill them in with <code>18D1</code> and <code>D00D</code> respectively.
-                Press &quot;Install Driver&quot; and give it a few minutes to install.
-                <Image
-                  src={zadigForm}
-                  alt="Zadig Form"
-                  width={575}
-                  height={254}
-                />
-              </li>
-            </ol>
           </p>
+          <ol>
+            <li>
+              Download and install <a href="https://zadig.akeo.ie/">Zadig</a>.
+            </li>
+            <li>
+              Under <code>Device</code> in the menu bar, select <code>Create New Device</code>.
+              <img
+                src={zadigCreateNewDevice}
+                alt="Zadig Create New Device"
+                width={575}
+                height={254}
+              />
+            </li>
+            <li>
+              Fill in three fields. The first field is just a description and
+              you can fill in anything.  The next two fields are very important.
+              Fill them in with <code>18D1</code> and <code>D00D</code> respectively.
+              Press &quot;Install Driver&quot; and give it a few minutes to install.
+              <img
+                src={zadigForm}
+                alt="Zadig Form"
+                width={575}
+                height={254}
+              />
+            </li>
+          </ol>
           <p>
             No additional software is required for macOS or Linux.
           </p>
@@ -90,7 +85,7 @@ export default function Home() {
               the device to your computer using the USB-C port <strong>(port 2)</strong>.</li>
             <li>After a few seconds, the device should indicate it&apos;s in fastboot mode and show its serial number.</li>
           </ol>
-          <Image
+          <img
             src={fastbootPorts}
             alt="image showing comma three and two ports. the upper port is labeled 1. the lower port is labeled 2."
             width={450}
@@ -135,13 +130,11 @@ export default function Home() {
             This is expected after the filesystem is erased. Press confirm to finish resetting your device.
           </p>
           <h3>General Tips</h3>
-          <p>
-            <ul>
-              <li>Try another computer or OS</li>
-              <li>Try different USB ports on your computer</li>
-              <li>Try different USB-C cables, including the OBD-C cable that came with the device</li>
-            </ul>
-          </p>
+          <ul>
+            <li>Try another computer or OS</li>
+            <li>Try different USB ports on your computer</li>
+            <li>Try different USB-C cables, including the OBD-C cable that came with the device</li>
+          </ul>
           <h3>Other questions</h3>
           <p>
             If you need help, join our <a href="https://discord.comma.ai" target="_blank">Discord server</a> and go to
@@ -155,11 +148,10 @@ export default function Home() {
         </div>
       </main>
 
-      <div
-        id="flash-container"
-        className="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800"
-      >
-        <Flash />
+      <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>
 
       <div className="w-screen max-w-none p-12 md:p-16 prose dark:prose-invert bg-white dark:bg-gray-900 lg:hidden">