Switched from SvelteKit to Svelte

21 files changed, 92 insertions, 162 deletions

diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs
deleted file mode 100644
index 3ccf435..0000000
--- a/web/.eslintrc.cjs
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-	root: true,
-	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
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
-};
diff --git a/web/.gitignore b/web/.gitignore
index c97ad87..e59a201 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -1,5 +1,5 @@
 node_modules/
-build/
+dist/
 .svelte-kit/
 .idea/
 
diff --git a/web/.prettierignore b/web/.prettierignore
deleted file mode 100644
index 29e170b..0000000
--- a/web/.prettierignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/
-node_modules/
-.svelte-kit/
diff --git a/web/README.md b/web/README.md
index 5c91169..156efd9 100644
--- a/web/README.md
+++ b/web/README.md
@@ -1,38 +1,47 @@
-# create-svelte
+# Svelte + TS + Vite
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+This template should help get you started developing with Svelte and TypeScript in Vite.
 
-## Creating a project
+## Recommended IDE Setup
 
-If you're seeing this, you've probably already done this step. Congrats!
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+## Need an official Svelte framework?
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
 
-## Developing
+## Technical considerations
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+**Why use this over SvelteKit?**
 
-```bash
-npm run dev
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
 
-## Building
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
 
-To create a production version of your app:
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
 
-```bash
-npm run build
-```
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
 
-You can preview the production build with `npm run preview`.
+**Why enable `allowJs` in the TS template?**
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store';
+export default writable(0);
+```
diff --git a/web/src/app.html b/web/index.html
index 2404d44..cb9b6ba 100644
--- a/web/src/app.html
+++ b/web/index.html
@@ -4,10 +4,9 @@
 		<title>WRMS</title>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" href="%sveltekit.assets%/client.css" />
-		%sveltekit.head%
+		<link rel="stylesheet" href="/src/index.css" />
 	</head>
 	<body>
-		%sveltekit.body%
+		<script type="module" src="/src/main.ts"></script>
 	</body>
 </html>
diff --git a/web/package.json b/web/package.json
index e6e0eef..7892591 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,31 +1,21 @@
 {
 	"name": "wrms",
+	"private": true,
 	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite",
 		"build": "vite build",
-		"preview": "vite preview",
-		"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 .",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^1.0.0",
-		"@sveltejs/adapter-static": "^1.0.5",
-		"@sveltejs/kit": "^1.0.0",
-		"@sveltejs/package": "^1.0.0",
+		"@sveltejs/vite-plugin-svelte": "^2.0.0",
 		"@tsconfig/svelte": "^3.0.0",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
+		"prettier-plugin-svelte": "^2.9.0",
+		"prettier": "^2.8.3",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.2",
-		"svelte-preprocess": "^5.0.1",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.4",
 		"vite": "^4.0.0"
@@ -49,11 +39,5 @@
 				}
 			}
 		]
-	},
-	"eslintIgnore": [
-		".svelte-kit",
-		"build",
-		"node_modules"
-	],
-	"type": "module"
+	}
 }
diff --git a/web/src/app.d.ts b/web/src/app.d.ts
deleted file mode 100644
index f59b884..0000000
--- a/web/src/app.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
-}
-
-export {};
diff --git a/web/src/svg/add.svg b/web/src/assets/add.svg
index 55d75aa..55d75aa 100644
--- a/web/src/svg/add.svg
+++ b/web/src/assets/add.svg
diff --git a/web/src/svg/pause.svg b/web/src/assets/pause.svg
index 6559131..6559131 100644
--- a/web/src/svg/pause.svg
+++ b/web/src/assets/pause.svg
diff --git a/web/src/svg/play.svg b/web/src/assets/play.svg
index 59855de..59855de 100644
--- a/web/src/svg/play.svg
+++ b/web/src/assets/play.svg
diff --git a/web/src/svg/stop.svg b/web/src/assets/stop.svg
index 76301a5..76301a5 100644
--- a/web/src/svg/stop.svg
+++ b/web/src/assets/stop.svg
diff --git a/web/static/client.css b/web/src/index.css
index 58fba29..58fba29 100644
--- a/web/static/client.css
+++ b/web/src/index.css
diff --git a/web/src/lib/devData.json b/web/src/lib/devData.json
deleted file mode 100644
index 9f99e61..0000000
--- a/web/src/lib/devData.json
+++ /dev/null
@@ -1,27 +0,0 @@
-[
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "1", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "2", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "3", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "4", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "5", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "6", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "7", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "8", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "9", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "10", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "11", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "12", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "13", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "14", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "15", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "16", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "17", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "18", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "19", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "20", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "21", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "22", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "23", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "24", "source": "dev", "weight": 0 },
-	{ "title": "Deutschland", "artist": "Rammstein", "uri": "25", "source": "dev", "weight": 0 }
-]
diff --git a/web/src/routes/+page.svelte b/web/src/main.svelte
index dd23681..38b3699 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/main.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import addSVG from '../svg/add.svg';
-	import playSVG from '../svg/play.svg';
-	import pauseSVG from '../svg/pause.svg';
-	import type { WsMessage, Song, SearchResponse } from '../lib/api';
-	import API from '../lib/api';
-	import devData from '../lib/devData.json';
-	import { dev } from '$app/environment';
+	import addSVG from './assets/add.svg';
+	import playSVG from './assets/play.svg';
+	import pauseSVG from './assets/pause.svg';
+	import type { WsMessage, Song, SearchResponse } from './lib/api';
+	import API from './lib/api';
 	API.baseUrl = '/';
 
 	let status: 'paused' | 'playing' = 'paused';
 	let currentSong: Song | null = null;
-	let playlist: Array<Song> = dev ? devData : [];
+	let playlist: Array<Song> = [];
 	let votes: Map<string, 'up' | 'down'> = new Map();
 
 	let search = '';
diff --git a/web/src/main.ts b/web/src/main.ts
new file mode 100644
index 0000000..099b842
--- /dev/null
+++ b/web/src/main.ts
@@ -0,0 +1,7 @@
+import App from './main.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts
deleted file mode 100644
index 189f71e..0000000
--- a/web/src/routes/+page.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const prerender = true;
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 0000000..4078e74
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/web/svelte.config.js b/web/svelte.config.js
index 8c8f77b..c6e1140 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -1,23 +1,7 @@
-import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+export default {
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-
-	kit: {
-		adapter: adapter({
-			// default options are shown. On some platforms
-			// these options are set automatically — see below
-			pages: 'build',
-			assets: 'build',
-			fallback: null,
-			precompress: false,
-			strict: true
-		})
-	}
+	preprocess: vitePreprocess()
 };
-
-export default config;
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 6ae0c8c..3941f55 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,17 +1,20 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
+	"extends": "@tsconfig/svelte/tsconfig.json",
 	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"resolveJsonModule": true,
+		/**
+		 * Typecheck JS in `.svelte` and `.js` files by default.
+		 * Disable checkJs if you'd like to use dynamic types in JS.
+		 * Note that setting allowJs false does not prevent the use
+		 * of JS in `.svelte` files.
+		 */
 		"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
+		"isolatedModules": true
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+	"references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 0000000..73a2040
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"module": "ESNext",
+		"moduleResolution": "Node"
+	},
+	"include": ["vite.config.ts"]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 1695034..5e75b6c 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,8 +1,7 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import type { UserConfig } from 'vite';
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 
-const config: UserConfig = {
-	plugins: [sveltekit()]
-};
-
-export default config;
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [svelte()]
+});