Refactor flash to use Svelte

.github/workflows/deploy.yml

@@ -23,14 +23,18 @@ jobs:
       - id: vars
         run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
 
-      - run: bun install
-      - run: bun run build
+      - name: "Install Dependencies"
+        run: bun install
+
+      - name: "Build"
+        run: bun run build
         env:
+          BASE_PATH: ''
           VITE_PUBLIC_GIT_SHA: ${{ steps.vars.outputs.sha_short }}
 
       - uses: actions/upload-pages-artifact@v3
         with:
-          path: ./dist
+          path: ./build
 
   deploy:
     environment:

.github/workflows/main.yaml

@@ -13,20 +13,23 @@ concurrency:
 jobs:
   test:
     runs-on: ubuntu-latest
-    timeout-minutes: 1
+    timeout-minutes: 2
     steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
-
-      - run: bun install
-      - run: bun run test
+      - uses: actions/checkout@v6
+      - uses: oven-sh/setup-bun@v2
+      - name: Install Dependencies
+        run: bun install
+      - name: Install Playwright Chromium
+        run: bunx playwright install chromium
+      - name: Run Tests
+        run: bun run test
 
   manifest:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      - uses: actions/checkout@v5
+      - uses: oven-sh/setup-bun@v2
 
       - run: bun install
       - name: test manifest in master

.gitignore

@@ -11,6 +11,7 @@
 /.pnp
 .pnp.js
 /.pnpm-store
+/.svelte-kit
 
 # testing
 /coverage
@@ -41,3 +42,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

README.md

@@ -1,5 +1,7 @@
 # flash
 
+Built on [Svelte 5](https://svelte.dev).
+
 ► [flash.comma.ai](https://flash.comma.ai)
 
 This tool allows you to flash AGNOS onto your comma device. Uses [qdl.js](https://github.com/commaai/qdl.js).
@@ -14,3 +16,10 @@ bun dev
 Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
 
 You can start editing the page by modifying `src/app/index.jsx`. The page auto-updates as you edit the file.
+
+
+**Helpful for debugging**
+* [chrome://usb-internals/](chrome://usb-internals/)
+* [chrome://device-log/](chrome://device-log/)
+* Add `?fast=1` to the URL to skip flashing the system partition (the slowest). Useful for testing the full flow quickly.
+* Add `?windows=1` to the URL to force Windows mode (shows Zadig driver instructions). Useful for testing the Windows flow on other platforms.

deploy-preview.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+set -e
+
+BRANCH="${1:-$(git branch --show-current)}"
+
+bun run build
+bunx wrangler pages deploy dist --project-name=connect --branch="$BRANCH"
+
+echo ""
+echo "Preview URL: https://${BRANCH}.connect-d5y.pages.dev"

package.json

@@ -12,29 +12,27 @@
   "engines": {
     "node": ">=20.11.0"
   },
-  "dependencies": {
+  "devDependencies": {
     "@commaai/qdl": "git+https://github.com/commaai/qdl.js.git#21d7be79fa5178f253d32a0879bd8bdd4fa37e30",
     "@fontsource-variable/inter": "^5.2.5",
     "@fontsource-variable/jetbrains-mono": "^5.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.48.5",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.17",
+    "@vitest/browser-playwright": "^4.0.10",
+    "jsdom": "^27.3.0",
+    "playwright": "^1.56.1",
+    "svelte": "^5.43.8",
+    "svelte-check": "^4.3.4",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7",
+    "vitest": "^4.0.10",
+    "vitest-browser-svelte": "^2.0.1",
     "xz-decompress": "^0.2.2"
   },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.16",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "10.4.21",
-    "jsdom": "^26.0.0",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.17",
-    "vite": "^6.2.6",
-    "vite-svg-loader": "^5.1.0",
-    "vitest": "^3.1.1"
-  },
   "trustedDependencies": [
     "@commaai/qdl",
     "esbuild",

index.html → src/app.html

@@ -1,18 +1,18 @@
-<!doctype html>
+<!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 charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="%sveltekit.assets%/icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="Update your comma device to the latest software"
+      content="Restore your comma device to a fresh factory state"
     />
     <title>flash.comma.ai</title>
+    %sveltekit.head%
   </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./src/main.jsx"></script>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
     <script
       defer
       data-domain="flash.comma.ai"