Switch from React to svelte

.github/workflows/deploy.yml

@@ -28,7 +28,7 @@ jobs:
           static_site_generator: next
       - name: Install dependencies
         run: bun install
-      - name: Build with Next.js
+      - name: Build with Vite
         run: bun run build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

.gitignore

@@ -11,14 +11,11 @@
 /.pnp
 .pnp.js
 /.pnpm-store
-
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
-
+# svelte-kit
+.svelte-kit
 # production
 /build
 

Dockerfile

@@ -17,34 +17,27 @@ FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-
-ENV NEXT_TELEMETRY_DISABLED 1
-ARG NEXT_PUBLIC_GIT_SHA
-ENV NEXT_PUBLIC_GIT_SHA $NEXT_PUBLIC_GIT_SHA
-
+ENV STANDALONE 1
 RUN bun run build
 
-
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app
 
-ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN addgroup --system --gid 1001 bunjs
-RUN adduser --system --uid 1001 nextjs
+RUN adduser --system --uid 1001 vitejs
 
 #COPY --from=builder /app/public ./public
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:bunjs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:bunjs /app/.next/static ./.next/static
+COPY --from=builder --chown=vitejs:bunjs /app/out ./
 
-USER nextjs
+USER vitejs
 
 EXPOSE 3000
 
 ENV PORT 3000
 
-CMD ["bun", "server.js"]
+CMD ["bun", "index.js"]

eslint.config.js

@@ -0,0 +1,27 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import svelte from 'eslint-plugin-svelte';
+import svelteParser from "svelte-eslint-parser";
+/** @type {import('eslint').Linter.FlatConfig[]} */
+export default [
+	js.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+				...globals.jest
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	},
+	{
+		files: ["**/*.svelte.js", "*.svelte.js"],
+		languageOptions: {
+			parser: svelteParser
+		},
+	},
+];

jsconfig.json

@@ -1,8 +1,3 @@
 {
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
+  "extends": "./.svelte-kit/tsconfig.json"
 }

package.json

@@ -3,38 +3,41 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint ."
   },
   "packageManager": "bun",
   "engines": {
     "node": ">=18.0.0"
   },
+  "devDependencies": {
+    "@sveltejs/adapter-node": "^5.0.1",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.0.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/svelte": "^5.1.0",
+    "@vitest/web-worker": "^1.6.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-svelte": "next",
+    "jsdom": "^24.1.0",
+    "svelte": "^5.0.0-next.1",
+    "vite": "^5.0.3",
+    "vitest": "^1.2.0"
+  },
+  "type": "module",
   "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",
+    "autoprefixer": "^10.4.19",
     "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",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "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",
-    "jsdom": "^22.1.0",
-    "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.34.2"
   }
 }

postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+export default {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+}

src/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script defer data-domain="flash.comma.ai" src="https://plausible.io/js/script.js"></script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>