Bump frontend dependencies to Svelte 5 (#3648)

* Add more recommended VS Code default configs

* Upgrade frontend dependencies including Svelte 5

* Fix derived_references_self runtime error

* Fix lint warnings

Author: Keavon

.nix/pkgs/graphite.nix

@@ -48,7 +48,7 @@ let
       npmDeps = pkgs.fetchNpmDeps {
         inherit (info) pname version;
         src = "${info.src}/frontend";
-        hash = "sha256-D8VCNK+Ca3gxO+5wriBn8FszG8/x8n/zM6/MPo9E2j4=";
+        hash = "sha256-WlwzWGoFi3hjRuM5ucrgavko/gg4iFAwMc6uMLjT/FI=";
       };
 
       npmRoot = "frontend";

.vscode/extensions.json

@@ -11,9 +11,10 @@
 		// Code quality
 		"wayou.vscode-todo-highlight",
 		"streetsidesoftware.code-spell-checker",
-		// Helpful
+		// Git
 		"mhutchie.git-graph",
 		"qezhu.gitlink",
+		// Helpful
 		"wmaurer.change-case"
 	]
 }

.vscode/settings.json

@@ -32,6 +32,7 @@
 		"editor.formatOnSave": false
 	},
 	// Rust Analyzer config
+	"rust-analyzer.check.command": "clippy",
 	"rust-analyzer.cargo.allTargets": false,
 	"rust-analyzer.procMacro.ignored": {
 		"serde_derive": ["Serialize", "Deserialize"],
@@ -47,13 +48,33 @@
 		"vite-plugin-svelte-css-no-scopable-elements": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
 		"a11y-no-static-element-interactions": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
 		"a11y-no-noninteractive-element-interactions": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y-click-events-have-key-events": "ignore" // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
+		"a11y-click-events-have-key-events": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
+		"a11y_consider_explicit_label": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
+		"a11y_click_events_have_key_events": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
+		"a11y_no_noninteractive_element_interactions": "ignore" // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
 	},
+	// Git Graph config
+	"git-graph.repository.fetchAndPrune": true,
+	"git-graph.repository.showRemoteHeads": false,
+	"git-graph.repository.commits.fetchAvatars": true,
+	// VS Code Git config
+	"git.autofetch": true,
+	"git.enableStatusBarSync": false,
+	"git.showActionButton": {
+		"sync": false
+	},
+	// CSpell config
+	"cSpell.language": "en-US",
+	"cSpell.logLevel": "Information",
+	"cSpell.allowCompoundWords": true,
 	// VS Code config
 	"html.format.wrapLineLength": 200,
 	"files.eol": "\n",
 	"files.insertFinalNewline": true,
 	"files.associations": {
 		"*.graphite": "json"
-	}
+	},
+	"editor.renderWhitespace": "boundary",
+	"editor.minimap.markSectionHeaderRegex": "// ===+\\n\\s*//\\s*(?<label>[^\\n]{1,18})[^\\n]*(\\n\\s*//[^\\n]*)*\\n\\s*// ===+",
+	"evenBetterToml.formatter.alignComments": false
 }

frontend/eslint.config.js

@@ -32,9 +32,6 @@ export default defineConfig([
 			"import/resolver": { typescript: true, node: true },
 		},
 		languageOptions: {
-			parserOptions: {
-				project: "./tsconfig.json",
-			},
 			globals: {
 				...globals.browser,
 				...globals.node,

frontend/package-installer.js

@@ -32,7 +32,11 @@ if (isInstallNeeded()) {
 		console.log("Finished installing npm packages.");
 	} catch (_) {
 		// eslint-disable-next-line no-console
-		console.error("Failed to install npm packages. Please delete the `node_modules` folder and run `npm install` from the `/frontend` directory.");
+		console.error(
+			"\n\n" +
+				"------------------------------------------------------------> " +
+				"Failed to install npm packages. Please delete the `node_modules` folder and run `npm install` from the `/frontend` directory.",
+		);
 		process.exit(1);
 	}
 } else {