.eslintrc.cjs

@@ -1,10 +1,16 @@
 module.exports = {
 	root: true,
-	extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
+		ecmaVersion: 2020
 	},
 	env: {
 		browser: true,

.npmrc

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

.vscode/settings.json

@@ -1,74 +1,44 @@
 {
-	"prettier.documentSelectors": [
-		"**/*.svelte"
-	],
 	"tailwindCSS.classAttributes": [
 		"class",
 		"accent",
 		"active",
-		"aspectRatio",
 		"background",
 		"badge",
-		"bgBackdrop",
-		"bgDark",
-		"bgDrawer",
-		"bgLight",
-		"blur",
 		"border",
+		"borderColor",
+		"borderWidth",
 		"button",
-		"buttonAction",
 		"buttonBack",
 		"buttonClasses",
 		"buttonComplete",
-		"buttonDismiss",
-		"buttonNeutral",
 		"buttonNext",
-		"buttonPositive",
-		"buttonTextCancel",
-		"buttonTextConfirm",
-		"buttonTextFirst",
-		"buttonTextLast",
 		"buttonTextNext",
 		"buttonTextPrevious",
-		"buttonTextSubmit",
-		"caretClosed",
-		"caretOpen",
 		"chips",
 		"color",
-		"controlSeparator",
-		"controlVariant",
 		"cursor",
 		"display",
 		"element",
 		"fill",
-		"fillDark",
-		"fillLight",
 		"flex",
 		"gap",
 		"gridColumns",
 		"height",
 		"hover",
-		"indent",
+		"invalid",
 		"justify",
 		"meter",
 		"padding",
-		"position",
-		"regionBackdrop",
 		"regionBody",
 		"regionCaption",
 		"regionCaret",
-		"regionCell",
-		"regionChildren",
 		"regionCone",
 		"regionContent",
 		"regionControl",
 		"regionDefault",
-		"regionDrawer",
 		"regionFoot",
-		"regionFootCell",
-		"regionFooter",
 		"regionHead",
-		"regionHeadCell",
 		"regionHeader",
 		"regionIcon",
 		"regionInterface",
@@ -82,11 +52,7 @@
 		"regionPanel",
 		"regionRowHeadline",
 		"regionRowMain",
-		"regionSummary",
-		"regionSymbol",
-		"regionTab",
 		"regionTrail",
-		"ring",
 		"rounded",
 		"select",
 		"shadow",
@@ -102,10 +68,10 @@
 		"slotSidebarLeft",
 		"slotSidebarRight",
 		"slotTrail",
+		"space",
 		"spacing",
 		"text",
 		"track",
-		"width",
-		"zIndex"
+		"width"
 	]
 }

package.json

@@ -1,33 +1,45 @@
 {
-	"name": "my-skeleton-app",
+	"name": "blackbirdchess-client-web",
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@floating-ui/dom": "^1.5.1",
-		"@skeletonlabs/skeleton": "^1.12.0",
+		"@playwright/test": "^1.28.1",
+		"@skeletonlabs/skeleton": "^1.0.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.5.0",
-		"@tailwindcss/forms": "^0.5.4",
-		"@tailwindcss/typography": "^0.5.9",
-		"autoprefixer": "^10.4.15",
-		"axios": "^1.4.0",
+		"@tailwindcss/forms": "^0.5.3",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"autoprefixer": "^10.4.7",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.26.0",
-		"postcss": "^8.4.28",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.14",
+		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
-		"sass": "^1.65.1",
 		"svelte": "^3.54.0",
-		"tailwindcss": "^3.3.3",
-		"vite": "^4.3.0"
+		"svelte-check": "^3.0.1",
+		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.5",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0",
+		"vitest": "^0.25.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"axios": "^1.3.4"
+	}
 }

playwright.config.ts

@@ -0,0 +1,11 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests'
+};
+
+export default config;

postcss.config.cjs

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

src/app.d.ts

@@ -7,3 +7,4 @@ declare namespace App {
 	// interface Error {}
 	// interface Platform {}
 }
+

src/app.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="skeleton">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+<body data-sveltekit-preload-data="hover" data-theme="skeleton">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
 </html>

src/app.postcss

@@ -1,6 +1,10 @@
-/*place global styles here */
+/*Write your global styles here, in PostCSS syntax */
 @import "/static/scss/icons.scss";
+@tailwind base;
+/*place global styles here */
 html,
 body {
-	@apply h-full;
+	@apply h-full overflow-hidden;
 }
+@tailwind components;
+@tailwind utilities;

src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

src/routes/+layout.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	// The ordering of these imports is critical to your app working properly
-	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
-	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/all.css';
-	// Most of your app wide CSS should be put in this file
-	import '../app.postcss';
+    // The ordering of these imports is critical to your app working properly
+    import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+    // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+    import '@skeletonlabs/skeleton/styles/all.css';
+    // Most of your app wide CSS should be put in this file
+    import '../app.postcss';
 
     import {alerts, globals} from "$lib/stores.js";
-    import { autoModeWatcher } from '@skeletonlabs/skeleton';
 
     let alertsvar;
     let globalvars;
@@ -26,7 +25,7 @@
         globalvars = value;
     });
 </script>
-<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
+
 {#if typeof globalvars.user !== 'undefined' }
     {#each alertsvar as alert, i}
         <aside class="alert variant-filled-{alert.class}">

src/routes/account/login/Login.svelte

@@ -32,6 +32,7 @@
     import { createEventDispatcher } from 'svelte';
     import {browser} from "$app/environment";
     import {requestor} from "../../../serverrequest.js";
+    import {throwError} from "svelte-preprocess/dist/modules/errors.js";
     import {goto} from "$app/navigation";
 
     var email = '';
@@ -52,7 +53,7 @@
             if(response.status != 200) {
                 let message = 'Something went wrong during login'
                 if(typeof responsedata.message !== 'undefined') message = responsedata.message
-                throw(message)
+                throwError(message)
             }
             if(!responsedata.success) return alerts.update(data => [...data, {text: 'Login failed: ' + responsedata.message , class: 'error'}]);
             globals.update((globalobj) => ({ ...globalobj, ...{user: responsedata.user }}));

svelte.config.js

@@ -1,10 +1,17 @@
+import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		preprocess({
+			postcss: true
+		})
+	],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
@@ -13,4 +20,5 @@ const config = {
 		adapter: adapter()
 	}
 };
+
 export default config;

tailwind.config.cjs

@@ -1,14 +1,15 @@
-import { join } from 'path'
-import forms from '@tailwindcss/forms'
-import typography from '@tailwindcss/typography'
-import skeleton from '@skeletonlabs/skeleton/tailwind/skeleton.cjs'
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	darkMode: 'class',
-	content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+	],
 	theme: {
-		extend: {},
+		extend: {}
 	},
-	plugins: [forms,typography,...skeleton()],
-}
+	plugins: [
+		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')(),
+		require('@tailwindcss/forms')
+	]
+};

tests/test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+});

tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": 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.js

@@ -1,6 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit()]
-});

vite.config.ts

@@ -0,0 +1,12 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	server: {
+		port: 5174
+	}
+});