migrate to eslint-plugin-svelte from deprecated plugin (#182)

* migrate to eslint-plugin-svelte from deprecated plugin

* fix missing change in eslintrc

* add rule for Eslint vscode extension to parse svelte files

* update the code after migrating to latest eslint-svelte plugin

.eslintrc.cjs

@@ -1,21 +1,39 @@
 module.exports = {
 	root: true,
 	parser: "@typescript-eslint/parser",
-	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
-	plugins: ["svelte3", "@typescript-eslint"],
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:svelte/recommended",
+		"prettier",
+	],
+	plugins: ["@typescript-eslint"],
 	ignorePatterns: ["*.cjs"],
-	overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
-	settings: {
-		"svelte3/typescript": () => require("typescript"),
-	},
+	overrides: [
+		{
+			files: ["*.svelte"],
+			parser: "svelte-eslint-parser",
+			parserOptions: {
+				parser: "@typescript-eslint/parser",
+			},
+		},
+	],
 	parserOptions: {
 		sourceType: "module",
 		ecmaVersion: 2020,
+		extraFileExtensions: [".svelte"],
 	},
 	rules: {
 		"no-shadow": ["error"],
 		"@typescript-eslint/no-explicit-any": "error",
 		"@typescript-eslint/no-non-null-assertion": "error",
+		"@typescript-eslint/no-unused-vars": [
+			// prevent variables with a _ prefix from being marked as unused
+			"warn",
+			{
+				argsIgnorePattern: "^_",
+			},
+		],
 	},
 	env: {
 		browser: true,

.vscode/settings.json

@@ -3,5 +3,6 @@
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.codeActionsOnSave": {
 		"source.fixAll": true
-	}
+	},
+	"eslint.validate": ["javascript", "svelte"]
 }

package-lock.json

@@ -34,7 +34,7 @@
 				"@typescript-eslint/parser": "^5.45.0",
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
-				"eslint-plugin-svelte3": "^4.0.0",
+				"eslint-plugin-svelte": "^2.27.3",
 				"prettier": "^2.8.0",
 				"prettier-plugin-svelte": "^2.8.1",
 				"prettier-plugin-tailwindcss": "^0.2.7",
@@ -1806,14 +1806,36 @@
 				"eslint": ">=7.0.0"
 			}
 		},
-		"node_modules/eslint-plugin-svelte3": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-4.0.0.tgz",
-			"integrity": "sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==",
+		"node_modules/eslint-plugin-svelte": {
+			"version": "2.27.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.27.3.tgz",
+			"integrity": "sha512-LPri23kkKeeh+TkYr9FndQEy2Q5BhOrIwatnLdXx6hUtTIolohzrTJhWMK3k8BwitVBnJGl5CDVWNkV80tmdkQ==",
 			"dev": true,
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.2.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14",
+				"debug": "^4.3.1",
+				"esutils": "^2.0.3",
+				"known-css-properties": "^0.27.0",
+				"postcss": "^8.4.5",
+				"postcss-load-config": "^3.1.4",
+				"postcss-safe-parser": "^6.0.0",
+				"svelte-eslint-parser": "^0.27.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ota-meshi"
+			},
 			"peerDependencies": {
-				"eslint": ">=8.0.0",
-				"svelte": "^3.2.0"
+				"eslint": "^7.0.0 || ^8.0.0-0",
+				"svelte": "^3.37.0"
+			},
+			"peerDependenciesMeta": {
+				"svelte": {
+					"optional": true
+				}
 			}
 		},
 		"node_modules/eslint-scope": {
@@ -2506,6 +2528,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/known-css-properties": {
+			"version": "0.27.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
+			"integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
+			"dev": true
+		},
 		"node_modules/kolorist": {
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.7.0.tgz",
@@ -3071,9 +3099,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.21",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-			"integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+			"version": "8.4.23",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
+			"integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3082,10 +3110,14 @@
 				{
 					"type": "tidelift",
 					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
 				}
 			],
 			"dependencies": {
-				"nanoid": "^3.3.4",
+				"nanoid": "^3.3.6",
 				"picocolors": "^1.0.0",
 				"source-map-js": "^1.0.2"
 			},
@@ -3173,6 +3205,22 @@
 				"postcss": "^8.2.14"
 			}
 		},
+		"node_modules/postcss-safe-parser": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": "^8.3.3"
+			}
+		},
 		"node_modules/postcss-selector-parser": {
 			"version": "6.0.11",
 			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
@@ -3443,9 +3491,9 @@
 			}
 		},
 		"node_modules/rollup": {
-			"version": "3.20.2",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz",
-			"integrity": "sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==",
+			"version": "3.21.5",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.5.tgz",
+			"integrity": "sha512-a4NTKS4u9PusbUJcfF4IMxuqjFzjm6ifj76P54a7cKnvVzJaG12BLVR+hgU2YDGHzyMMQNxLAZWuALsn8q2oQg==",
 			"dev": true,
 			"bin": {
 				"rollup": "dist/bin/rollup"
@@ -3819,6 +3867,56 @@
 				"node": ">=12.20"
 			}
 		},
+		"node_modules/svelte-eslint-parser": {
+			"version": "0.27.0",
+			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.27.0.tgz",
+			"integrity": "sha512-x9cBbCZwLdCnNE3yPqGhvAqEl9FCILC6AaV2xRtwzaMCpvpqO7ceONXj9xka3fQFczSqLzkwOxP4Ln4cIQNqXg==",
+			"dev": true,
+			"dependencies": {
+				"eslint-scope": "^7.0.0",
+				"eslint-visitor-keys": "^3.0.0",
+				"espree": "^9.0.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ota-meshi"
+			},
+			"peerDependencies": {
+				"svelte": "^3.37.0"
+			},
+			"peerDependenciesMeta": {
+				"svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/svelte-eslint-parser/node_modules/eslint-scope": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+			"integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+			"dev": true,
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/svelte-eslint-parser/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.1",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
@@ -4212,15 +4310,14 @@
 			"integrity": "sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow=="
 		},
 		"node_modules/vite": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz",
-			"integrity": "sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==",
+			"version": "4.3.5",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz",
+			"integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.17.5",
-				"postcss": "^8.4.21",
-				"resolve": "^1.22.1",
-				"rollup": "^3.18.0"
+				"postcss": "^8.4.23",
+				"rollup": "^3.21.0"
 			},
 			"bin": {
 				"vite": "bin/vite.js"

package.json

@@ -22,7 +22,7 @@
 		"@typescript-eslint/parser": "^5.45.0",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"eslint-plugin-svelte": "^2.27.3",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"prettier-plugin-tailwindcss": "^0.2.7",

src/lib/components/CodeBlock.svelte

@@ -17,9 +17,12 @@
 
 <div class="group relative my-4 rounded-lg">
 	<pre
-		class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><code
-			class="language-{lang}">{@html highlightedCode || code.replaceAll("<", "&lt;")}</code
-		></pre>
+		class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20">
+		<code class="language-{lang}">
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html highlightedCode || code.replaceAll("<", "&lt;")}
+		</code>
+	</pre>
 	<CopyToClipBoardBtn
 		classNames="absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100"
 		value={code}

src/lib/components/chat/ChatInput.svelte

@@ -30,6 +30,7 @@
 		aria-hidden="true"
 		style="min-height: {minHeight}; max-height: {maxHeight}">{value + "\n"}</pre>
 
+	<!-- svelte-ignore a11y-autofocus -->
 	<textarea
 		enterkeyhint="send"
 		tabindex="0"

src/lib/components/chat/ChatMessage.svelte

@@ -104,6 +104,7 @@
 					{#if token.type === "code"}
 						<CodeBlock lang={token.lang} code={unsanitizeMd(token.text)} />
 					{:else}
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 						{@html marked(token.raw, options)}
 					{/if}
 				{/each}

src/routes/privacy/+page.svelte

@@ -5,6 +5,7 @@
 
 <div class="overflow-auto p-6">
 	<div class="prose mx-auto px-4 pb-24 pt-6 dark:prose-invert md:pt-12">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html marked(privacy, { gfm: true })}
 	</div>
 </div>