commaai · rishaan05 · Apr 5, 2025 · Apr 5, 2025
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/bun.lockb b/bun.lockb
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,122 @@
+import eslint from "@eslint/js";
+import reactRefresh from "eslint-plugin-react-refresh";
+import reactHooks from "eslint-plugin-react-hooks";
+import react from "eslint-plugin-react";
+import tseslint from "typescript-eslint";
+
+/** @type {import('eslint').Linter.Config} */
+export default [
+  // Base configurations
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+
+  // Global settings for all files
+  {
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        window: "readonly",
+        document: "readonly",
+        navigator: "readonly",
+        console: "readonly",
+        fetch: "readonly",
+        performance: "readonly",
+      },
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+        pragma: "h", // For Preact
+        jsxRuntime: "automatic",
+      },
+      jsxImportSource: "preact",
+    },
+    plugins: {
+      react,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      // Core rules that are actually helpful
+      "no-console": ["warn", { allow: ["info", "warn", "error", "debug"] }],
+      "no-constant-condition": ["error", { checkLoops: false }],
+      "no-debugger": "warn",
+      "no-duplicate-case": "error",
+      "no-empty": ["error", { allowEmptyCatch: true }],
+      "no-inner-declarations": "off",
+
+      // Make unused vars a warning instead of error, and allow underscore prefix
+
+      // React rules
+      "react/jsx-no-target-blank": "off",
+      "react/prop-types": "off",
+      "react/jsx-uses-react": "off",
+      "react/react-in-jsx-scope": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+    },
+  },
+
+  // TypeScript specific rules
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        jsxPragma: "h",
+        jsxFragmentPragma: "Fragment",
+      },
+    },
+    rules: {
+      // Override TypeScript rules to be more sensible
+
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/ban-ts-comment": [
+        "warn",
+        {
+          "ts-ignore": "allow-with-description",
+          minimumDescriptionLength: 5,
+        },
+      ],
+    },
+  },
+
+  // JSX/TSX specifics
+  {
+    files: ["**/*.jsx", "**/*.tsx"],
+    rules: {
+      "react/jsx-uses-vars": "error",
+      "react/no-unknown-property": ["error", { ignore: ["class"] }],
+    },
+  },
+
+  // Config files with specific project reference
+  {
+    files: ["vite.config.ts", "vitest.config.ts"],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: "./tsconfig.node.json",
+      },
+    },
+  },
+
+  // Ignores
+  {
+    ignores: ["node_modules/**", "dist/**"],
+  },
+];
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./src/app/icon.svg" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"

diff --git a/package.json b/package.json
@@ -5,41 +5,51 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "start": "vite preview",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives",
-    "test": "vitest"
+    "lint": "eslint . --ext ts,tsx,js,jsx",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
   },
   "engines": {
     "node": ">=20.11.0"
   },
   "dependencies": {
     "@commaai/qdl": "git+https://github.com/commaai/qdl.js.git#13a64c79aa8c57494c01bdd93774ed58e34b6450",
-    "@fontsource-variable/inter": "^5.0.18",
-    "@fontsource-variable/jetbrains-mono": "^5.0.21",
-    "comlink": "^4.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "xz-decompress": "^0.2.1"
+    "@fontsource-variable/inter": "^5.2.5",
+    "@fontsource-variable/jetbrains-mono": "^5.2.5",
+    "@preact/preset-vite": "^2.10.1",
+    "@testing-library/preact": "^3.2.4",
+    "@types/wicg-file-system-access": "^2023.10.6",
+    "bowser": "^2.11.0",
+    "comlink": "^4.4.2",
+    "preact": "^10.26.4",
+    "xz-decompress": "^0.2.2"
   },
   "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",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "jsdom": "^22.1.0",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "vite": "^5.2.12",
+    "@eslint/js": "^9.24.0",
+    "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/bun": "^1.2.8",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.24.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "jsdom": "^26.0.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.29.0",
+    "vite": "^6.2.5",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^1.6.0"
+    "vitest": "^3.1.1"
   },
   "trustedDependencies": [
     "@commaai/qdl",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
-}
+};
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,52 @@
+import comma from "./assets/comma.svg";
+import qdlPorts from "./assets/qdl-ports.svg";
+import zadigCreateNewDevice from "./assets/zadig_create_new_device.png";
+import zadigForm from "./assets/zadig_form.png";
+
+import { IntroSection } from "./components/sections/IntroSection";
+import { RequirementsSection } from "./components/sections/Requirements";
+import { FlashingSection } from "./components/sections/FlashingSection";
+import { TroubleshootingSection } from "./components/sections/TroubleshootingSection";
+import { DETACH_SCRIPT, PRODUCT_ID, VENDOR_ID } from "./utils/constants";
+import Flash from "./components/Flash";
+
+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">
+        <IntroSection commaLogo={comma} />
+        <hr />
+
+        <RequirementsSection
+          vendorId={VENDOR_ID}
+          productId={PRODUCT_ID}
+          detachScript={DETACH_SCRIPT}
+          zadigCreateNewDevice={zadigCreateNewDevice}
+          zadigForm={zadigForm}
+        />
+        <hr />
+
+        <FlashingSection detachScript={DETACH_SCRIPT} qdlPorts={qdlPorts} />
+        <hr />
+
+        <TroubleshootingSection />
+
+        <div className="hidden lg:block">
+          <hr />
+          flash.comma.ai version: <code>{version}</code>
+        </div>
+      </main>
+
+      <div className="lg:flex-1 h-[700px] lg:h-screen bg-gray-100 dark:bg-gray-800">
+        <Flash />
+      </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">
+        flash.comma.ai version: <code>{version}</code>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/App.test.jsx b/src/app/App.test.jsx