feat: ✨ switch to ts, use tailwind

.eslintrc.cjs

@@ -1,15 +1,30 @@
 module.exports = {
 	root: true,
-	extends: ['eslint:recommended', 'prettier'],
-	plugins: ['svelte3'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier',
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
 	parserOptions: {
 		sourceType: 'module',
 		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte'],
 	},
 	env: {
 		browser: true,
 		es2017: true,
 		node: true,
 	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+			},
+		},
+	],
 }

.gitignore

@@ -7,3 +7,5 @@ node_modules
 .env.*
 !.env.example
 .vercel
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+resolution-mode=highest

.prettierrc

@@ -1,11 +1,10 @@
 {
 	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "es5",
 	"semi": false,
-	"printWidth": 70,
-	"arrowParens": "avoid",
+	"trailingComma": "all",
 	"proseWrap": "always",
+	"printWidth": 70,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],
 	"overrides": [

package.json

@@ -1,32 +1,44 @@
 {
-	"name": "sveltekit-with-urql-delete",
+	"name": "sveltekit-with-urql",
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-		"test": "playwright test",
+		"test": "npm run test:integration && npm 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 --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
 	},
 	"devDependencies": {
-		"@playwright/test": "1.37.1",
+		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
-		"@urql/svelte": "3.0.4",
-		"eslint": "8.47.0",
-		"eslint-config-prettier": "9.0.0",
-		"eslint-plugin-svelte3": "4.0.0",
-		"graphql": "16.8.0",
-		"prettier": "3.0.2",
-		"prettier-plugin-svelte": "3.0.3",
-		"svelte": "4.2.0",
-		"svelte-check": "3.5.0",
-		"typescript": "5.1.6",
-		"vite": "4.4.9"
+		"@sveltejs/kit": "^1.20.4",
+		"@tailwindcss/typography": "^0.5.9",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"@urql/svelte": "^4.0.4",
+		"autoprefixer": "^10.4.14",
+		"daisyui": "^3.1.6",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"graphql": "^16.8.0",
+		"postcss": "^8.4.24",
+		"postcss-load-config": "^4.0.1",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tailwindcss": "^3.3.2",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2",
+		"vitest": "^0.32.2"
 	},
 	"type": "module"
 }

playwright.config.ts

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