svelte5 migration, formatting cleanup

.eslintrc.cjs

@@ -2,10 +2,12 @@ module.exports = {
     extends: [
         // add more generic rule sets here, such as:
         // 'eslint:recommended',
-    "plugin:svelte/prettier",
+        'plugin:svelte/prettier',
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended'
     ],
     rules: {
         // override/add rules settings here, such as:
         // 'svelte/rule-name': 'error'
-  },
     }
+};

.prettierrc

@@ -5,6 +5,5 @@
     "trailingComma": "none",
     "printWidth": 100,
     "plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

README.md

@@ -12,6 +12,7 @@ bun --bun install
 Copy `.env` to `env.tpl` and insert the correct folder locations
 
 ## running dev server
+
 ```bash
 bun --bun run dev
 ```

bun.lock

@@ -27,7 +27,9 @@
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^4.0.4",
+        "@types/bun": "^1.2.2",
         "svelte-adapter-bun": "https://github.com/gornostay25/svelte-adapter-bun",
+        "typescript-svelte-plugin": "^0.3.45",
       },
     },
   },
@@ -121,7 +123,7 @@
 
     "@jridgewell/set-array": ["@jridgewell/set-array@1.2.1", "", {}, "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="],
 
-    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.4.15", "", {}, "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="],
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
 
@@ -193,6 +195,8 @@
 
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
+    "@types/bun": ["@types/bun@1.2.2", "", { "dependencies": { "bun-types": "1.2.2" } }, "sha512-tr74gdku+AEDN5ergNiBnplr7hpDp3V1h7fqI2GcR/rsUaM39jpSeKH0TFibRvU0KwniRx5POgaYnaXbk0hU+w=="],
+
     "@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
 
     "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
@@ -215,6 +219,8 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/ws": ["@types/ws@8.5.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw=="],
+
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@5.62.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/type-utils": "5.62.0", "@typescript-eslint/utils": "5.62.0", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.0", "natural-compare-lite": "^1.4.0", "semver": "^7.3.7", "tsutils": "^3.21.0" }, "peerDependencies": { "@typescript-eslint/parser": "^5.0.0", "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag=="],
 
     "@typescript-eslint/parser": ["@typescript-eslint/parser@5.62.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", "@typescript-eslint/typescript-estree": "5.62.0", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA=="],
@@ -269,6 +275,8 @@
 
     "brotli": ["brotli@1.3.3", "", { "dependencies": { "base64-js": "^1.1.2" } }, "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg=="],
 
+    "bun-types": ["bun-types@1.2.2", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-RCbMH5elr9gjgDGDhkTTugA21XtJAy/9jkKe/G3WR2q17VPGhcquf9Sir6uay9iW+7P/BV0CAHA1XlHXMAVKHg=="],
+
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
     "carta-md": ["carta-md@4.6.7", "", { "dependencies": { "diff": "^5.2.0", "esm-env": "^1.0.0", "rehype-stringify": "^10.0.0", "remark-gfm": "^4.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.0", "shiki": "^1.4.0", "unified": "^11.0.4" }, "peerDependencies": { "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.1" } }, "sha512-dJFg1SLEBdoXDCfetMjceW+lZ1SfUZ3nsWRttwGUnCx052OPqBYrTP7ticwQqyolcNlR29aMm1neEuNGpYaDWg=="],
@@ -315,6 +323,8 @@
 
     "decode-named-character-reference": ["decode-named-character-reference@1.0.2", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg=="],
 
+    "dedent-js": ["dedent-js@1.0.1", "", {}, "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="],
+
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
@@ -489,6 +499,8 @@
 
     "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
 
+    "lower-case": ["lower-case@2.0.2", "", { "dependencies": { "tslib": "^2.0.3" } }, "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg=="],
+
     "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
@@ -597,6 +609,8 @@
 
     "natural-compare-lite": ["natural-compare-lite@1.4.0", "", {}, "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="],
 
+    "no-case": ["no-case@3.0.4", "", { "dependencies": { "lower-case": "^2.0.2", "tslib": "^2.0.3" } }, "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg=="],
+
     "nwsapi": ["nwsapi@2.2.16", "", {}, "sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ=="],
 
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
@@ -615,6 +629,8 @@
 
     "parse5": ["parse5@7.2.1", "", { "dependencies": { "entities": "^4.5.0" } }, "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ=="],
 
+    "pascal-case": ["pascal-case@3.1.2", "", { "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3" } }, "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g=="],
+
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
     "path-is-absolute": ["path-is-absolute@1.0.1", "", {}, "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="],
@@ -727,6 +743,8 @@
 
     "svelte-select": ["svelte-select@5.8.3", "", { "dependencies": { "svelte-floating-ui": "1.5.8" } }, "sha512-nQsvflWmTCOZjssdrNptzfD1Ok45hHVMTL5IHay5DINk7dfu5Er+8KsVJnZMJdSircqtR0YlT4YkCFlxOUhVPA=="],
 
+    "svelte2tsx": ["svelte2tsx@0.7.34", "", { "dependencies": { "dedent-js": "^1.0.1", "pascal-case": "^3.1.1" }, "peerDependencies": { "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0", "typescript": "^4.9.4 || ^5.0.0" } }, "sha512-WTMhpNhFf8/h3SMtR5dkdSy2qfveomkhYei/QW9gSPccb0/b82tjHvLop6vT303ZkGswU/da1s6XvrLgthQPCw=="],
+
     "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
 
     "text-table": ["text-table@0.2.0", "", {}, "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="],
@@ -761,6 +779,8 @@
 
     "typescript": ["typescript@5.7.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw=="],
 
+    "typescript-svelte-plugin": ["typescript-svelte-plugin@0.3.45", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "svelte2tsx": "~0.7.25" } }, "sha512-65OpqjDdn05Ici3lgZnhmljDKLJb1Mulz5SmUQUFKXDF1Zhs5CQgdp63PkaDghmwhZFxfu/ut9Q8oGD1CKbJow=="],
+
     "undici-types": ["undici-types@6.19.8", "", {}, "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="],
 
     "unicode-properties": ["unicode-properties@1.4.1", "", { "dependencies": { "base64-js": "^1.3.0", "unicode-trie": "^2.0.0" } }, "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg=="],
@@ -827,10 +847,6 @@
 
     "@humanwhocodes/config-array/debug": ["debug@4.3.4", "", { "dependencies": { "ms": "2.1.2" } }, "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="],
 
-    "@jridgewell/gen-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
-
-    "@jridgewell/trace-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
-
     "@typescript-eslint/eslint-plugin/debug": ["debug@4.3.4", "", { "dependencies": { "ms": "2.1.2" } }, "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="],
 
     "@typescript-eslint/parser/debug": ["debug@4.3.4", "", { "dependencies": { "ms": "2.1.2" } }, "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="],
@@ -847,9 +863,9 @@
 
     "eslint/debug": ["debug@4.3.4", "", { "dependencies": { "ms": "2.1.2" } }, "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="],
 
-    "espree/acorn": ["acorn@8.9.0", "", { "bin": "bin/acorn" }, "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ=="],
+    "eslint-plugin-svelte/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.4.15", "", {}, "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="],
 
-    "esrap/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+    "espree/acorn": ["acorn@8.9.0", "", { "bin": "bin/acorn" }, "sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ=="],
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
@@ -859,12 +875,8 @@
 
     "https-proxy-agent/debug": ["debug@4.3.4", "", { "dependencies": { "ms": "2.1.2" } }, "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="],
 
-    "magic-string/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
-
     "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
-    "svelte/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
-
     "tsutils/tslib": ["tslib@1.14.1", "", {}, "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="],
 
     "@eslint/eslintrc/debug/ms": ["ms@2.1.2", "", {}, "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="],

db/update_db.js

@@ -35,14 +35,14 @@ fs.readdir(jsonFolder, (err, files) => {
     if (err) throw err;
     console.log(`Found ${files.length} JSON file(s) in ${jsonFolder}.`);
 
-	files.forEach(file => {
+    files.forEach((file) => {
         if (!file.endsWith('.json')) return;
         if (file.endsWith('.sideload.json')) return;
 
         const jsonString = fs.readFileSync(path.join(jsonFolder, file), 'utf8');
         let jsonData = JSON.parse(jsonString);
 
-		const sideloadPath = path.join(jsonFolder, file.slice(0, -5) + ".sideload.json");
+        const sideloadPath = path.join(jsonFolder, file.slice(0, -5) + '.sideload.json');
         if (fs.existsSync(sideloadPath, 'utf8')) {
             const sideloadData = JSON.parse(fs.readFileSync(sideloadPath));
             jsonData = { ...jsonData, ...sideloadData };
@@ -59,10 +59,9 @@ fs.readdir(jsonFolder, (err, files) => {
         // Prepare attributes for insertion
         const values = Object.keys(jsonData).map(
             // Serialize value if array
-			key => Array.isArray(jsonData[key]) ? JSON.stringify(jsonData[key]) : jsonData[key]
+            (key) => (Array.isArray(jsonData[key]) ? JSON.stringify(jsonData[key]) : jsonData[key])
         );
-		const columns = Object.keys(jsonData).map(key => lookup[key]);
+        const columns = Object.keys(jsonData).map((key) => lookup[key]);
-
 
         const sql = `INSERT OR REPLACE INTO Stream (${columns.join(', ')}) VALUES (${columns.map(() => '?').join(', ')})`;
         db.prepare(sql).run(...values);

package.json

@@ -8,14 +8,15 @@
         "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 .",
+        "lint": "prettier --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
+        "format": "prettier --write .",
         "init_db": "cd db && node ./init_db.js",
         "update_db": "cd db && node ./update_db.js",
         "generate_iconfont_subset": "cd scripts && bash ./generate_iconfont_subset.sh"
     },
     "dependencies": {
         "@sveltejs/kit": "^2.17.1",
+        "@types/bun": "^1.2.2",
         "@types/node": "^20.17.17",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
@@ -39,7 +40,10 @@
     "type": "module",
     "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^4.0.4",
-		"svelte-adapter-bun": "https://github.com/gornostay25/svelte-adapter-bun"
+        "svelte-adapter-bun": "https://github.com/gornostay25/svelte-adapter-bun",
+        "typescript-svelte-plugin": "^0.3.45"
     },
-	"trustedDependencies": ["svelte-adapter-bun"]
+    "trustedDependencies": [
+        "svelte-adapter-bun"
+    ]
 }

src/app.html

@@ -1,6 +1,5 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" translate="no">
-
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -11,5 +10,4 @@
     <body data-sveltekit-preload-data="hover">
         <div style="display: contents">%sveltekit.body%</div>
     </body>
-
 </html>

src/routes/+layout.svelte

@@ -1,3 +1,11 @@
+<script lang="ts">
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();
+</script>
+
 <svelte:head>
     <style>
         body,
@@ -60,4 +68,4 @@
     </style>
 </svelte:head>
 
-<slot />
+{@render children?.()}

src/routes/streams/+layout.svelte

@@ -1,13 +1,13 @@
-<script>
+<script lang="ts">
     import Sidebar from './Sidebar.svelte';
     import Footer from './Footer.svelte';
-	export let data;
+    let { data, children } = $props();
 </script>
 
 <div id="mainContainer">
     <div id="sidebar" class="panel"><Sidebar streams={data.streams} /></div>
     <div id="footer" class="panel-alt"><Footer /></div>
-	<div id="content"><slot /></div>
+    <div id="content">{@render children?.()}</div>
 </div>
 
 <style>

src/routes/streams/+page.svelte

@@ -11,13 +11,16 @@
 <style>
     #welcome-page {
         height: 100%;
-		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
+        background:
+            local url('/assets/result.png') top right / 50% no-repeat,
+            rgba(0, 0, 0, 0.8);
         scrollbar-gutter: stable;
     }
 
     @media (max-width: 575px) {
         #welcome-page {
-			background: local url('/assets/result.png') top right / 80% no-repeat,
+            background:
+                local url('/assets/result.png') top right / 80% no-repeat,
                 rgba(0, 0, 0, 0.8);
         }
     }

src/routes/streams/Sidebar.svelte

@@ -1,16 +1,13 @@
-<script>
+<script lang="ts">
     import { goto } from '$app/navigation';
     import { currentStream, favoritedStreams } from '$lib/stores.js';
     import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
     import TagSelect from './TagSelect.svelte';
 
-	export let streams;
+    let { streams } = $props();
-	let filteredTags = [];
+    let filteredTags = $state([]);
-	let listOpen;
+    let listOpen = $state();
-	let favoritesOnly = false;
+    let favoritesOnly = $state(false);
-
-	$: displayedStreams = streamsToDisplay(filteredTags);
-	$: remainingTags = getRemainingTags(displayedStreams);
 
     function streamsToDisplay(filteredTags) {
         const displayedStreams = streams.filter(
@@ -46,12 +43,14 @@
             : $favoritedStreams.add(stream['id']);
         $favoritedStreams = $favoritedStreams; // for reactivity
     }
+    let displayedStreams = $derived(streamsToDisplay(filteredTags));
+    let remainingTags = $derived(getRemainingTags(displayedStreams));
 </script>
 
 <div class="tag-select">
     <TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
     <button
-		on:click={() => (favoritesOnly = !favoritesOnly)}
+        onclick={() => (favoritesOnly = !favoritesOnly)}
         class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
     >
 </div>
@@ -65,7 +64,7 @@
             class="stream-item {current ? 'current-stream' : ''}"
             id="stream-{stream['id']}"
         >
-			<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
+            <button class="stream-item-button" onclick={() => goto('/streams/' + stream['id'])}>
                 <span class="stream-item-id">
                     ID:
                     {shorthandCode(stream['id'])}</span
@@ -86,7 +85,7 @@
             </button>
 
             <button
-				on:click={(e) => {
+                onclick={(e) => {
                     e.stopPropagation();
                     updateFavorites(stream);
                 }}

src/routes/streams/TagSelect.svelte

@@ -1,17 +1,13 @@
-<script>
+<script lang="ts">
     import Select from 'svelte-select';
+    import { run } from 'svelte/legacy';
     import { tagList } from '$lib/stores.js';
 
-	let items = tagList.map((x) => ({ value: x, label: x }));
+    let items = $state(tagList.map((x) => ({ value: x, label: x })));
 
-	let value = [];
+    let value = $state([]);
-	export let checked = [];
+    let isChecked = $state({});
-	let isChecked = {};
+    let { checked = $bindable([]), remainingTags = [], listOpen = $bindable() } = $props();
-	export let remainingTags = [];
-	export let listOpen;
-
-	$: computeValue(checked);
-	$: computeIsChecked(checked);
 
     function computeIsChecked() {
         isChecked = {};
@@ -43,6 +39,11 @@
             label.toLowerCase().includes(filterText.toLowerCase())
         );
     };
+
+    run(() => {
+        computeValue(checked);
+        computeIsChecked(checked);
+    });
 </script>
 
 <Select
@@ -59,12 +60,14 @@
     --max-height="42px"
     listOffset={0}
 >
-	<div class="item" slot="item" let:item>
+    {#snippet item({ item })}
+        <div class="item">
             <label for={item.value}>
                 <input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
                 {item.label}
             </label>
         </div>
+    {/snippet}
 </Select>
 
 <style>

src/routes/streams/[stream_id]/+page.server.ts

@@ -1,8 +1,8 @@
 import fs from 'fs';
 import path from 'path';
-import { error } from "@sveltejs/kit";
+import { error } from '@sveltejs/kit';
-import { getStreamInfo } from "$lib/database.js";
+import { getStreamInfo } from '$lib/database.js';
-import { dev } from "$app/environment";
+import { dev } from '$app/environment';
 import { STREAM_JSON_LOCATION } from '$env/static/private';
 
 let getOriginalJson, writeSideloadJson;
@@ -13,31 +13,31 @@ if (dev) {
     const jsonFolder = path.resolve(STREAM_JSON_LOCATION);
 
     getOriginalJson = function (streamId) {
-		const filePath = path.join(jsonFolder, streamId + ".sideload.json");
+        const filePath = path.join(jsonFolder, streamId + '.sideload.json');
         if (fs.existsSync(filePath)) {
             const jsonString = fs.readFileSync(filePath, 'utf8');
             return jsonString;
         } else {
-			return JSON.stringify({ 'title': '', 'description': '', 'tags': [] });
+            return JSON.stringify({ title: '', description: '', tags: [] });
-		}
         }
+    };
 
     writeSideloadJson = function (streamId, newJson) {
-		const filePath = path.join(jsonFolder, streamId + ".sideload.json");
+        const filePath = path.join(jsonFolder, streamId + '.sideload.json');
         fs.writeFileSync(filePath, JSON.stringify(newJson), 'utf8');
-	}
+    };
 
     actions = {
         default: async ({ params, request }) => {
             const data = await request.formData();
             // let newJson = JSON.parse(getOriginalJson(params.stream_id));
-			let newJson = {};
+            const newJson = {};
             newJson['title'] = data.get('title');
             newJson['description'] = data.get('description');
             newJson['tags'] = data.getAll('tags');
             writeSideloadJson(params.stream_id, newJson);
         }
-	}
+    };
 }
 
 export function load({ params }) {
@@ -48,11 +48,11 @@ export function load({ params }) {
 
     if (dev) {
         // pass raw JSON for metadata editor
-		let original = JSON.parse(getOriginalJson(params.stream_id));
+        const original = JSON.parse(getOriginalJson(params.stream_id));
         return {
             stream: result,
             original: original
-		}
+        };
     } else {
         return {
             stream: result

src/routes/streams/[stream_id]/+page.svelte

@@ -1,12 +1,17 @@
-<script>
+<script lang="ts">
+    import { run } from 'svelte/legacy';
+
     import StreamPage from './StreamPage.svelte';
     import MetadataEditor from './MetadataEditor.svelte';
     import Player from './Player.svelte';
     import { dev } from '$app/environment';
     import { currentStream, updateCurrentStream } from '$lib/stores.js';
 
-	export let data;
+    let { data } = $props();
-	$: updateCurrentStream(data.stream);
+
+    run(() => {
+        updateCurrentStream(data.stream);
+    });
 </script>
 
 <div id="streamContainer">
@@ -34,7 +39,9 @@
     #streamPage {
         grid-row: 1 / 2;
         overflow: auto;
-		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
+        background:
+            local url('/assets/result.png') top right / 50% no-repeat,
+            rgba(0, 0, 0, 0.8);
     }
 
     #player {
@@ -46,7 +53,8 @@
 
     @media (max-width: 575px) {
         #streamPage {
-			background: local url('/assets/result.png') top right / 80% no-repeat,
+            background:
+                local url('/assets/result.png') top right / 80% no-repeat,
                 rgba(0, 0, 0, 0.8);
         }
     }

src/routes/streams/[stream_id]/MetadataEditor.svelte

@@ -1,8 +1,9 @@
-<script>
+<script lang="ts">
     import { page } from '$app/stores';
     import { tagList } from '$lib/stores.js';
+	import { run } from 'svelte/legacy';
 
-	export let original;
+    let { original = $bindable() } = $props();
 
     let tagMap = new Map();
 
@@ -13,7 +14,9 @@
         });
     };
 
-	$: reloadTags(original);
+    run(() => {
+        reloadTags(original);
+    });
 </script>
 
 {#key $page.url.pathname}
@@ -31,7 +34,7 @@
                 style="min-width:400px;min-height:100px"
                 name="description"
                 bind:value={original.description}
-			/>
+            ></textarea>
         </label>
         <br />
         <label>

src/routes/streams/[stream_id]/Player.svelte

@@ -2,9 +2,9 @@
 	 taken from https://github.com/Linkcube/svelte-audio-controls
 	 ISC License
 -->
-<svelte:options accessors />
+<svelte:options />
 
-<script context="module">
+<script module>
     let getAudio = null;
 
     export function jumpToTrack(s) {
@@ -13,7 +13,10 @@
     }
 </script>
 
-<script>
+<script lang="ts">
+    import { run, createBubbler } from 'svelte/legacy';
+
+    const bubble = createBubbler();
     import { onMount, onDestroy } from 'svelte';
     import { fade } from 'svelte/transition';
     import {
@@ -23,39 +26,59 @@
         updateCurrentSong
     } from '$lib/stores.js';
 
-	export let src;
+    interface Props {
-	export let audio = null;
+        src: any;
-	export let paused = true;
+        audio?: any;
-	export let duration = 0;
+        paused?: boolean;
-	export let muted = false;
+        duration?: number;
-	export let volume = 0.67;
+        muted?: boolean;
-	export let preload = 'metadata';
+        volume?: number;
-	export let iconColor = 'gray';
+        preload?: string;
-	export let textColor = 'gray';
+        iconColor?: string;
-	export let barPrimaryColor = 'lightblue';
+        textColor?: string;
-	export let barSecondaryColor = '#6f6f6f';
+        barPrimaryColor?: string;
-	export let backgroundColor = 'white';
+        barSecondaryColor?: string;
-	export let display = false;
+        backgroundColor?: string;
-	export let inlineTooltip = false;
+        display?: boolean;
-	export let disableTooltip = false;
+        inlineTooltip?: boolean;
+        disableTooltip?: boolean;
+    }
+
+    let {
+        src,
+        audio = $bindable(null),
+        paused = $bindable(true),
+        duration = $bindable(0),
+        muted = $bindable(false),
+        volume = $bindable(0.67),
+        preload = 'metadata',
+        iconColor = 'gray',
+        textColor = 'gray',
+        barPrimaryColor = 'lightblue',
+        barSecondaryColor = '#6f6f6f',
+        backgroundColor = 'white',
+        display = false,
+        inlineTooltip = false,
+        disableTooltip = false
+    }: Props = $props();
 
     getAudio = () => {
         return audio;
     };
 
-	let currentTime = 0;
+    let currentTime = $state(0);
-	let tooltip;
+    let tooltip = $state();
-	let tooltipX = 0;
+    let tooltipX = $state(0);
-	let tooltipY = 0;
+    let tooltipY = $state(0);
-	let showTooltip = false;
+    let showTooltip = $state(false);
-	let seekText = '';
+    let seekText = $state('');
-	let seekTrack = '';
+    let seekTrack = $state('');
-	let seeking = false;
+    let seeking = $state(false);
-	let volumeSeeking = false;
+    let volumeSeeking = $state(false);
-	let songBar;
+    let songBar = $state();
-	let volumeBar;
+    let volumeBar = $state();
-	let innerWidth;
+    let innerWidth = $state();
-	let innerHeight;
+    let innerHeight = $state();
 
     onMount(async () => {
         // default volume
@@ -73,9 +96,6 @@
         }
     });
 
-	$: updateCurrentSong(currentTime, $currentSongIndex);
-	$: updateAudioAttributes(audio);
-
     function seek(event, bounds) {
         let x = event.pageX - bounds.left;
         return Math.min(Math.max(x / bounds.width, 0), 1);
@@ -163,13 +183,37 @@
         if (showTooltip && !disableTooltip) seekTooltip(event);
         if (volumeSeeking) seekVolume(event);
     }
+    run(() => {
+        updateCurrentSong(currentTime, $currentSongIndex);
+    });
+    run(() => {
+        updateAudioAttributes(audio);
+    });
+
+    export {
+        src,
+        audio,
+        paused,
+        duration,
+        muted,
+        volume,
+        preload,
+        iconColor,
+        textColor,
+        barPrimaryColor,
+        barSecondaryColor,
+        backgroundColor,
+        display,
+        inlineTooltip,
+        disableTooltip
+    };
 </script>
 
 <svelte:window
     bind:innerWidth
     bind:innerHeight
-	on:mouseup={() => (seeking = volumeSeeking = false)}
+    onmouseup={() => (seeking = volumeSeeking = false)}
-	on:mousemove={trackMouse}
+    onmousemove={trackMouse}
 />
 
 {#if display}
@@ -177,7 +221,7 @@
         <button
             class="material-icons"
             style="--icon-color:{iconColor}"
-			on:click={() => (audio.paused ? audio.play() : audio.pause())}
+            onclick={() => (audio.paused ? audio.play() : audio.pause())}
         >
             {#if paused}
                 play_arrow
@@ -189,18 +233,18 @@
             bind:this={songBar}
             value={currentTime ? currentTime : 0}
             max={duration}
-			on:mousedown={() => (seeking = true)}
+            onmousedown={() => (seeking = true)}
-			on:mouseenter={() => (showTooltip = true)}
+            onmouseenter={() => (showTooltip = true)}
-			on:mouseleave={() => (showTooltip = false)}
+            onmouseleave={() => (showTooltip = false)}
-			on:click={seekAudio}
+            onclick={seekAudio}
             style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
             class="song-progress"
-		/>
+        ></progress>
         <div class="control-times">{formatSeconds(currentTime)}/{formatSeconds(duration)}</div>
         <button
             style="--icon-color:{iconColor}"
             class="material-icons"
-			on:click={() => (muted = !muted)}
+            onclick={() => (muted = !muted)}
         >
             {#if muted}
                 volume_off
@@ -215,11 +259,11 @@
         <progress
             bind:this={volumeBar}
             value={volume}
-			on:mousedown={() => (volumeSeeking = true)}
+            onmousedown={() => (volumeSeeking = true)}
-			on:click={seekVolume}
+            onclick={seekVolume}
             style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
             class="volume-progress"
-		/>
+        ></progress>
         {#if !disableTooltip && (inlineTooltip || showTooltip)}
             <div
                 class:hover-tooltip={!inlineTooltip}
@@ -253,8 +297,8 @@
     bind:currentTime
     {muted}
     {volume}
-	on:play={setMediaMetadataOnPlay}
+    onplay={setMediaMetadataOnPlay}
-	on:ended
+    onended={bubble('ended')}
     {preload}
 >
     <source {src} type="audio/ogg;codecs=opus" />

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -9,7 +9,7 @@
         sanitizer: DOMPurify.sanitize
     });
 
-	$: formattedStreamDate = formatDate($currentStream.stream_date);
+    let formattedStreamDate = $derived(formatDate($currentStream.stream_date));
 </script>
 
 <svelte:head>
@@ -38,7 +38,7 @@
                         ><div class="timestamp-field-flex">
                             {formatTrackTime(track[0])}
                             <button
-								on:click={() => jumpToTrack(track[0])}
+                                onclick={() => jumpToTrack(track[0])}
                                 class="material-icons"
                                 style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
                                 >fast_forward</button
@@ -181,17 +181,6 @@
         border: 0;
     }
 
-	.back-button {
-		opacity: 0.75;
-		border: 1px solid white;
-		transform: rotateX(180deg);
-	}
-
-	.back-button:hover {
-		opacity: 1;
-		border: 1px solid white;
-	}
-
     @media (max-width: 575px) {
         .material-icons {
             opacity: 0.5;

src/routes/streams/[stream_id]/original/+server.ts

@@ -8,12 +8,12 @@ if (process.env.NODE_ENV === 'development') {
     const jsonFolder = './db/stream_json/';
 
     GET = function ({ params }) {
-		const filePath = jsonFolder + params.stream_id + ".json";
+        const filePath = jsonFolder + params.stream_id + '.json';
         if (fs.existsSync(filePath)) {
             const jsonString = fs.readFileSync(filePath, 'utf8');
             return json(jsonString);
         } else {
             error(404);
         }
-	}
+    };
 }

svelte.config.js

@@ -10,7 +10,10 @@ const config = {
     // Consult https://kit.svelte.dev/docs/integrations#preprocessors
     // for more information about preprocessors
     preprocess: vitePreprocess(),
-
+    compilerOptions: {
+        // disable all accessibility warnings
+        warningFilter: (warning) => !warning.code.startsWith('a11y')
+    },
     kit: {
         // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
         // If your environment is not supported or you settled on a specific environment, switch out the adapter.

tsconfig.json

@@ -8,7 +8,13 @@
         "resolveJsonModule": true,
         "skipLibCheck": true,
         "sourceMap": true,
-		"strict": true
+        "strict": true,
+        "plugins": [
+            {
+                "name": "typescript-svelte-plugin",
+                "assumeIsSvelteProject": true
+            }
+        ]
     }
     // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
     //

vite.config.ts

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