Transition to Svelte 5 + shadcn (#315)

* Start Svelte 5 migration

* Update pnpm-lock.yaml

* Update svelte

* More Svelte5 + shadcn conversion

* More conversion towards shadcn-ui

* Update dependencies

* Enable single bundle builds

* More fixes

* Improve UI more

* pnpm run format

* oops

* Replace rest of fontawesome icons with lucide

* Update dependencies

* Finish Svelte5 transition

* Some more minor final UI tweaks

* Maybe fix tests

frontend/.eslintignore

@@ -7,7 +7,12 @@ node_modules
 .env.*
 !.env.example
 
-# Ignore files for PNPM, NPM and YARN
+# Package Managers
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Generated or imported files
+/components.json
+/src/lib/_fbs
+/src/lib/components/ui

frontend/.gitignore

@@ -1,10 +1,24 @@
-.DS_Store
+test-results
 node_modules
-/build
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
 /.svelte-kit
-/package
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
+!.env.test
+
+# Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

frontend/.npmrc

@@ -1 +1 @@
-engine-strict=true
+engine-strict=true

frontend/.prettierignore

@@ -7,7 +7,12 @@ node_modules
 .env.*
 !.env.example
 
-# Ignore files for PNPM, NPM and YARN
+# Package Managers
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Generated or imported files
+/components.json
+/src/lib/_fbs
+/src/lib/components/ui

frontend/.prettierrc

@@ -5,8 +5,7 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte"],
-  "pluginSearchDirs": ["."],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "overrides": [
     { "files": "*.svelte", "options": { "parser": "svelte" } },
     { "files": "package*.json", "options": { "tabWidth": 2, "useTabs": true } }

frontend/components.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src\\app.tcss",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
+}

frontend/e2e/demo.test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h3', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('h3')).toBeVisible();
+});

frontend/eslint.config.js

@@ -0,0 +1,34 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+  includeIgnoreFile(gitignorePath),
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs['flat/recommended'],
+  prettier,
+  ...svelte.configs['flat/prettier'],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ['**/*.svelte'],
+
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser,
+      },
+    },
+  }
+);

frontend/package.json

@@ -7,47 +7,50 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"test": "pnpm run test:integration && pnpm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
 	},
 	"devDependencies": {
-		"@floating-ui/dom": "1.6.12",
-		"@playwright/test": "1.49.0",
-		"@skeletonlabs/skeleton": "2.10.3",
-		"@skeletonlabs/tw-plugin": "0.4.0",
-		"@sveltejs/adapter-static": "^3.0.6",
-		"@sveltejs/kit": "2.8.3",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
-		"@tailwindcss/forms": "0.5.9",
-		"@tailwindcss/typography": "0.5.15",
-		"@types/node": "22.9.3",
-		"autoprefixer": "10.4.20",
-		"eslint": "^9.15.0",
-		"eslint-config-prettier": "9.1.0",
-		"eslint-plugin-svelte": "2.46.0",
-		"flatbuffers": "24.12.23",
-		"postcss": "8.4.49",
-		"prettier": "3.3.3",
-		"prettier-plugin-svelte": "3.3.2",
-		"svelte": "4.2.19",
-		"svelte-check": "4.1.0",
-		"tailwindcss": "3.4.15",
-		"tslib": "2.8.1",
-		"typescript": "5.7.2",
-		"vite-plugin-tailwind-purgecss": "^0.3.3",
-		"vitest": "2.1.5"
-	},
-	"dependencies": {
-		"vite": "^5.4.11"
+		"@eslint/compat": "^1.2.5",
+		"@playwright/test": "^1.49.1",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/forms": "^0.5.10",
+		"@tailwindcss/typography": "^0.5.16",
+		"autoprefixer": "^10.4.20",
+		"bits-ui": "1.0.0-next.77",
+		"clsx": "^2.1.1",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"flatbuffers": "^24.12.23",
+		"globals": "^15.14.0",
+		"lucide-svelte": "^0.471.0",
+		"mode-watcher": "^0.5.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.9",
+		"svelte": "^5.17.3",
+		"svelte-check": "^4.1.4",
+		"svelte-sonner": "^0.3.28",
+		"tailwind-merge": "^2.6.0",
+		"tailwind-variants": "^0.3.0",
+		"tailwindcss": "^3.4.17",
+		"tailwindcss-animate": "^1.0.7",
+		"typescript": "^5.7.3",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.7",
+		"vitest": "^2.1.8"
 	},
 	"engines": {
-		"node": ">=20.18",
-		"pnpm": ">=9"
+		"node": "^20.18",
+		"pnpm": "^9"
 	},
 	"volta": {
 		"node": "20.18.0"

frontend/playwright.config.ts

@@ -1,12 +1,10 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 
-const config: PlaywrightTestConfig = {
+export default defineConfig({
   webServer: {
-    command: 'pnpm run build && pnpm run preview',
+    command: 'npm run build && npm run preview',
     port: 4173,
   },
-  testDir: 'tests',
-  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-};
 
-export default config;
+  testDir: 'e2e',
+});