Phase 1: bump svelte version and opt in to runes mode

frontend/package.json

@@ -36,7 +36,7 @@
 		"reflect-metadata": "^0.2.2"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
 		"@types/node": "^22.6.1",
 		"@typescript-eslint/eslint-plugin": "^8.7.0",
 		"@typescript-eslint/parser": "^8.7.0",
@@ -46,18 +46,19 @@
 		"eslint-import-resolver-typescript": "^3.6.3",
 		"eslint-plugin-import": "^2.30.0",
 		"eslint-plugin-prettier": "^5.2.1",
-		"eslint-plugin-svelte": "^2.44.0",
+		"eslint-plugin-svelte": "^3.9.2",
+		"minimatch": "^10.0.3",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"process": "^0.11.10",
 		"rollup-plugin-license": "^3.5.3",
 		"sass": "1.78.0",
-		"svelte": "^4.2.19",
+		"svelte": "^5.0.0",
 		"svelte-preprocess": "^6.0.2",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.6.2",
-		"vite": "^5.4.14",
+		"vite": "^6.3.5",
 		"vite-multiple-assets": "1.3.1"
 	},
 	"//": "The dev dependency for `sass` can be removed once <https://github.com/sveltejs/svelte-preprocess/issues/656> is fixed, but meanwhile we have to",

frontend/src/app.d.ts

@@ -0,0 +1,10 @@
+declare global {
+	namespace Graphite {
+		type Platform = "Windows" | "Mac" | "Linux" | "Web";
+		type MenuType = "Popover" | "Dropdown" | "Dialog" | "Cursor";
+
+		// interface Error {}
+	}
+}
+
+export {};

frontend/src/main.ts

@@ -12,8 +12,10 @@ import "@fontsource/source-sans-pro/700.css";
 // The library replaces the Reflect API on the window to support more features.
 import "reflect-metadata";
 
+import { mount } from "svelte";
+
 import App from "@graphite/App.svelte";
 
 document.body.setAttribute("data-app-container", "");
 
-export default new App({ target: document.body });
+export default mount(App, { target: document.body });

frontend/src/vite-env.d.ts

@@ -1,2 +1,17 @@
+/// <reference types="node" />
 /// <reference types="svelte" />
+/// <reference types="svelte/store" />
+/// <reference types="svelte/motion" />
+/// <reference types="svelte/transition" />
+/// <reference types="svelte/animate" />
+/// <reference types="svelte/easing" />
+/// <reference types="svelte/elements" />
 /// <reference types="vite/client" />
+
+/* 
+    Why vite-env.d.ts instead of compilerOptions.types inside jsconfig.json or tsconfig.json?
+
+    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.
+*/

frontend/tsconfig.json

@@ -11,7 +11,6 @@
 		"allowSyntheticDefaultImports": true,
 		"verbatimModuleSyntax": true,
 		"sourceMap": true,
-		"types": ["node", "svelte", "svelte/store", "svelte/motion", "svelte/transition", "svelte/animate", "svelte/easing"],
 		"baseUrl": ".",
 		"paths": {
 			"/*": ["./*"],

frontend/vite.config.ts

@@ -2,7 +2,8 @@
 
 import { spawnSync } from "child_process";
 
-import fs from "fs";
+import { readFileSync } from "node:fs";
+import { minimatch } from "minimatch";
 import path from "path";
 
 import { svelte } from "@sveltejs/vite-plugin-svelte";
@@ -33,6 +34,21 @@ const ALLOWED_LICENSES = [
 	"NCSA",
 ];
 
+const runesGlobs = [
+	"**/components/*.svelte"
+	"**/components/*.svelte"
+	"**/components/*.svelte"
+];
+
+function forceRunes(filePath: string): boolean {
+	const relativePath = filePath.slice(filePath.indexOf("src"));
+	// Test the file path against each glob pattern
+	return runesGlobs.some((min) => {
+		console.log("🚀 ~ forceRunes ~ filePath:", relativePath, minimatch(filePath, min));
+		return minimatch(filePath, min);
+	});
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [
@@ -45,6 +61,12 @@ export default defineConfig({
 
 				defaultHandler?.(warning);
 			},
+			dynamicCompileOptions({ filename, compileOptions }) {
+				console.log("🚀 ~ dynamicCompileOptions ~ compileOptions:", compileOptions.runes);
+				if (forceRunes(filename) && !compileOptions.runes) {
+					return { runes: true };
+				}
+			},
 		}),
 		viteMultipleAssets(["../demo-artwork"]),
 	],
@@ -137,7 +159,7 @@ function formatThirdPartyLicenses(jsLicenses: Dependency[]): string {
 		const pkg = license.packages[foundPackagesIndex];
 
 		license.packages = license.packages.filter((pkg) => pkg.name !== "path-bool");
-		const noticeText = fs.readFileSync(path.resolve(__dirname, "../libraries/path-bool/NOTICE"), "utf8");
+		const noticeText = readFileSync(path.resolve(__dirname, "../libraries/path-bool/NOTICE"), "utf8");
 
 		licenses.push({
 			licenseName: license.licenseName,