🚨 Fix ESLint issues

eslint.config.js

@@ -10,7 +10,6 @@ export default tseslint.config(
 		files: ['.js', '.mjs', '.mts', '.svelte', '.ts'].flatMap(e => [`**/*${e}`, `*${e}`]),
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 		extends: [
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 			eslint.configs.recommended,
 			...tseslint.configs.strictTypeChecked,
 			...tseslint.configs.stylisticTypeChecked,
@@ -53,7 +52,6 @@ export default tseslint.config(
 	},
 
 	{
-		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 		extends: [...svelte.configs['flat/recommended'], ...svelte.configs['flat/prettier']],
 		files: ['.svelte'].flatMap(e => [`**/*${e}`, `*${e}`]),
 		languageOptions: {

package.json

@@ -39,11 +39,14 @@
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.8.3",
 		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@testing-library/svelte": "^4.2.3",
+		"@testing-library/user-event": "^14.6.1",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.20.1",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.11.0",
+		"happy-dom": "^17.1.0",
 		"postcss": "^8.4.49",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
@@ -53,7 +56,7 @@
 		"svelte-eslint-parser": "^0.43.0",
 		"tailwindcss": "^3.4.17",
 		"tslib": "^2.7.0",
-		"typescript": "^5.6.3",
+		"typescript": "5.8.0-beta",
 		"typescript-eslint": "^8.24.0",
 		"vite": "^5.4.12",
 		"vitest": "^2.1.9"

src/lib/components/Footer.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { CodeBracket } from '@natoboram/heroicons.svelte/20/solid'
 </script>
 

src/lib/components/Header.svelte

@@ -1,23 +1,11 @@
 <script lang="ts">
-	import { Brightness, brightness } from '$lib/stores/brightness.js'
+	import { Brightness, brightness, toggleBrightness } from '$lib/stores/brightness.js'
 	import { Moon, Sun } from '@natoboram/heroicons.svelte/24/solid'
 
 	const icons = {
 		[Brightness.dark]: Sun,
 		[Brightness.light]: Moon,
 	}
-
-	function toggleBrightness(current: Brightness) {
-		switch (current) {
-			case Brightness.dark:
-				brightness.set(Brightness.light)
-				return
-
-			case Brightness.light:
-				brightness.set(Brightness.dark)
-				return
-		}
-	}
 </script>
 
 <header class="flex flex-row justify-end gap-4 p-2">

src/lib/components/Header.test.ts

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/svelte'
+import { test } from 'vitest'
+import Header from './Header.svelte'
+
+test('Header', ({ expect }) => {
+	render(Header)
+
+	const button = screen.getByRole<HTMLButtonElement>('button')
+	expect(button).toBeDefined()
+})

src/lib/stores/brightness.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest'
+import { Brightness, toBrightness, toggleBrightness } from './brightness.js'
+
+describe('toBrightness', () => {
+	test(Brightness.dark, () => {
+		const result = toBrightness(Brightness.dark)
+		expect(result).toBe(Brightness.dark)
+	})
+
+	test(Brightness.light, () => {
+		const result = toBrightness(Brightness.light)
+		expect(result).toBe(Brightness.light)
+	})
+
+	test(String(undefined), () => {
+		const result = toBrightness(undefined)
+		expect(result).toBe(Brightness.light)
+	})
+})
+
+describe('toggleBrightness', () => {
+	test(Brightness.dark, () => {
+		const result = toggleBrightness(Brightness.dark)
+		expect(result).toBe(Brightness.light)
+	})
+
+	test(Brightness.light, () => {
+		const result = toggleBrightness(Brightness.light)
+		expect(result).toBe(Brightness.dark)
+	})
+})

src/lib/stores/brightness.ts

@@ -1,12 +1,14 @@
 import { browser } from '$app/environment'
-import { writable } from 'svelte/store'
+import { type Writable, writable } from 'svelte/store'
 
-export enum Brightness {
-	dark = 'dark',
-	light = 'light',
-}
+export const Brightness = {
+	dark: 'dark',
+	light: 'light',
+} as const
+
+export type Brightness = (typeof Brightness)[keyof typeof Brightness]
 
-function toBrightness(s: string | null): Brightness {
+export function toBrightness(s: unknown): Brightness {
 	switch (s) {
 		case 'dark':
 			return Brightness.dark
@@ -17,20 +19,32 @@ function toBrightness(s: string | null): Brightness {
 	}
 }
 
-export const brightness = writable<Brightness>(
+export const brightness: Writable<Brightness> = writable<Brightness>(
 	browser ? toBrightness(localStorage.getItem('brightness')) : Brightness.light,
 )
 
 brightness.subscribe(value => {
 	if (browser)
 		switch (value) {
 			case Brightness.dark:
-				document.documentElement.classList.add('dark')
+				document.documentElement.classList.add(Brightness.light)
 				localStorage.setItem('brightness', Brightness.dark)
 				break
 			case Brightness.light:
-				document.documentElement.classList.remove('dark')
+				document.documentElement.classList.remove(Brightness.dark)
 				localStorage.setItem('brightness', Brightness.light)
 				break
 		}
 })
+
+export function toggleBrightness(current: Brightness): Brightness {
+	switch (current) {
+		case Brightness.dark:
+			brightness.set(Brightness.light)
+			return Brightness.light
+
+		case Brightness.light:
+			brightness.set(Brightness.dark)
+			return Brightness.dark
+	}
+}

tsconfig.json

@@ -1,33 +1,36 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		// Projects
+		/* Projects */
 		"incremental": true,
 		"composite": true,
 
-		// Language and Environment
+		/* Language and Environment */
 		"useDefineForClassFields": true,
 		"moduleDetection": "force",
 
-		// Modules
+		/* Modules */
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
 		"resolvePackageJsonExports": true,
 		"resolvePackageJsonImports": true,
 		"resolveJsonModule": true,
 
-		// JavaScript Support
+		/* JavaScript Support */
 
-		// Emit
+		/* Emit */
 		"declaration": true,
 		"declarationMap": true,
 		"sourceMap": true,
 
-		// Interop Constraints
-		"forceConsistentCasingInFileNames": true,
+		/* Interop Constraints */
+		"isolatedModules": true,
 		"verbatimModuleSyntax": true,
+		"isolatedDeclarations": true,
+		"erasableSyntaxOnly": true,
+		"forceConsistentCasingInFileNames": true,
 
-		// Type Checking
+		/* Type Checking */
 		"strict": true,
 		"noImplicitAny": true,
 		"strictNullChecks": true,
@@ -46,12 +49,10 @@
 		"noImplicitOverride": true,
 		"noPropertyAccessFromIndexSignature": true,
 		"allowUnusedLabels": false,
-		"allowUnreachableCode": false
+		"allowUnreachableCode": false,
 
-		// Completeness
+		/* Completeness */
+		"skipDefaultLibCheck": true,
+		"skipLibCheck": true
 	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant
-	// includes/excludes from the referenced tsconfig.json - TypeScript does not merge them in.
 }

vite.config.ts

@@ -1,9 +1,13 @@
 import { sveltekit } from '@sveltejs/kit/vite'
+import type { UserConfig } from 'vite'
 import { defineConfig } from 'vitest/config'
 
-export default defineConfig({
+const config: UserConfig = defineConfig({
 	plugins: [sveltekit()],
 	test: {
+		environment: 'happy-dom',
 		include: ['src/**/*.{test,spec}.{js,ts}'],
 	},
 })
+
+export default config