refactor: modernize the Svelte frontend with Vite

.github/workflows/build.yml

@@ -60,7 +60,7 @@ jobs:
           sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf squashfs-tools webkit2gtk-driver xvfb dbus-x11 python3-gi gir1.2-gtk-3.0
       - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
-          node-version: 22
+          node-version: 24
       - run: corepack enable
       - uses: dtolnay/rust-toolchain@6bed0761d98439e5a578e2877258200ad565ba87 # stable
         with:

.github/workflows/codeql.yml

@@ -37,6 +37,13 @@ jobs:
           sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
       - uses: dtolnay/rust-toolchain@6bed0761d98439e5a578e2877258200ad565ba87 # stable
         if: matrix.language == 'rust'
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        if: matrix.language == 'rust'
+        with:
+          node-version: 24
+      - name: Prepare assets for Tauri macros
+        if: matrix.language == 'rust'
+        run: corepack enable && yarn install --immutable && yarn build
       - name: Initialize CodeQL
         uses: github/codeql-action/init@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0
         with:

.gitignore

@@ -56,3 +56,5 @@ jspm_packages/
 # Native application test evidence
 /test-results/
 __pycache__/
+
+/dist/

README.md

@@ -52,15 +52,20 @@ and then you can start the Tauri dev server:
 yarn run tauri dev
 ```
 
-You need to have Rust and NodeJS ready to run on your system before doing this
+Use Node.js 24 LTS, Yarn 4.18.0 (pinned in `package.json`), and Rust with the native Tauri prerequisites.
 https://v2.tauri.app/start/prerequisites/
 
-The Yarn version being used is berry. If you don't have Yarn v4 in your system, you can enable it with:
+Enable the pinned Yarn version through Corepack:
 
 ```bash
 corepack enable
 ```
 
+The frontend uses Vite with the official Svelte plugin. `yarn dev` serves it on
+port 5173; `yarn build` creates `dist/`, which Tauri embeds. `yarn preview` previews
+the frontend build in a browser; native calculation and clipboard require Tauri.
+Svelte handles the TypeScript types directly; no preprocessor is needed.
+
 ### Deployment
 
 Run `yarn check`, `yarn lint`, `yarn build`, and `yarn test` before releasing. `yarn test` runs the Rust calculation tests and requires the Tauri development prerequisites.

docs/ci.md

@@ -32,7 +32,8 @@ intentional and independent of the Test workflow's push-based build checks.
 
 Rust uses `build-mode: none` and requires Cargo and rustup. CodeQL still executes
 build scripts and compiles macros through rust-analyzer; the Rust job installs
-Tauri's native build-script dependencies without building desktop packages.
+Tauri's native build-script dependencies and builds the frontend assets needed by
+its macros, without building desktop packages.
 
 Check the code-scanning tool status page for extraction errors and actual files
 analyzed, not just a green job or zero alerts. The supported-language documentation

public/index.html → index.html

@@ -8,9 +8,8 @@
 
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="stylesheet" href="/global.css" />
-    <link rel="stylesheet" href="/build/bundle.css" />
 
-    <script defer src="/build/bundle.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </head>
 
   <body></body>

package.json

@@ -4,55 +4,45 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "start": "sirv public --no-clear",
     "tauri": "tauri",
-    "dev": "rollup -c -w",
-    "build": "rollup -c",
+    "dev": "vite",
+    "build": "vite build",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "eslint . && prettier --check .",
     "format": "prettier --write .",
     "test": "cargo test --release --locked --manifest-path src-tauri/Cargo.toml",
-    "build:linux": "tauri build --bundles appimage,deb,rpm && bash scripts/fix-appimage.sh src-tauri/target/release/bundle/appimage/*.AppImage"
+    "build:linux": "tauri build --bundles appimage,deb,rpm && bash scripts/fix-appimage.sh src-tauri/target/release/bundle/appimage/*.AppImage",
+    "preview": "vite preview"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.4.1",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@rollup/plugin-commonjs": "^28.0.9",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@tauri-apps/api": "^2.10.1",
-    "@tauri-apps/cli": "^2.10.0",
+    "@eslint/compat": "^2.1.1",
+    "@eslint/js": "^10.0.1",
+    "@fortawesome/free-solid-svg-icons": "^7.3.1",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@tauri-apps/api": "~2.10.1",
+    "@tauri-apps/cli": "~2.10.0",
     "@tauri-apps/plugin-clipboard-manager": "~2.3.2",
     "@tsconfig/svelte": "^5.0.8",
-    "@types/codemirror": "^5.60.17",
     "@types/dygraphs": "^2.1.11",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
     "codemirror": "^6.0.2",
-    "dygraphs": "^2.2.1",
-    "eslint": "^9.39.3",
+    "dygraphs": "^2.2.2",
+    "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.15.0",
+    "eslint-plugin-svelte": "^3.23.0",
     "frappe-charts": "^1.6.2",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.5.0",
-    "rollup": "^4.58.0",
-    "rollup-plugin-css-only": "^4.5.5",
-    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-svelte": "^7.2.3",
-    "sirv-cli": "^3.0.1",
-    "svelte": "^5.53.0",
-    "svelte-check": "^4.4.3",
-    "svelte-eslint-parser": "^1.4.1",
+    "globals": "^17.0.0",
+    "prettier": "^3.9.6",
+    "prettier-plugin-svelte": "^4.1.1",
+    "svelte": "^5.57.0",
+    "svelte-check": "^4.7.6",
+    "svelte-eslint-parser": "^1.8.1",
     "svelte-fa": "^4.0.4",
-    "svelte-preprocess": "^6.0.3",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.0"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.70.0",
+    "vite": "^8.3.0"
   },
   "engines": {
-    "node": ">=22"
+    "node": ">=24"
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.18.0"
 }

scripts/benchmark.py

@@ -60,7 +60,8 @@ def prepare(destination, revision=None):
                         ignore=shutil.ignore_patterns("target"))
     # Assets are not exercised by this CPU benchmark. Tauri's compile-time
     # context still needs an asset directory; no JS toolchain is necessary here.
-    assets = destination / "public/build"
+    config = json.loads((destination / "src-tauri/tauri.conf.json").read_text())
+    assets = destination / "src-tauri" / config["build"]["frontendDist"]
     assets.mkdir(parents=True, exist_ok=True)
     (assets / "index.html").write_text("<!doctype html><title>Benchmark</title>")
     main = destination / "src-tauri/src/main.rs"

src-tauri/tauri.conf.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "build": {
-    "beforeBuildCommand": "npm run build",
-    "beforeDevCommand": "npm run dev",
-    "frontendDist": "../public",
-    "devUrl": "http://localhost:8080"
+    "beforeBuildCommand": "yarn build",
+    "beforeDevCommand": "yarn dev",
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:5173"
   },
   "bundle": {
     "active": true,

src/Components/Cards/Primes.svelte

@@ -26,17 +26,17 @@
     >
   </div>
   <h2>Primes</h2>
-  <p>
-    <CodeMirror bind:primes bind:editorFullscreen />
-  </p>
+  <div class="prime-list">
+    <CodeMirror {primes} {editorFullscreen} />
+  </div>
 </div>
 
 <style>
   #primes {
     overflow: hidden;
   }
 
-  #primes p {
+  .prime-list {
     font-size: 1.1em;
     font-weight: 100;
     font-family: monospace;

src/Components/Util/CodeMirror.svelte

@@ -1,66 +1,37 @@
-<svelte:options runes={true} />
-
 <script lang="ts">
   import { onMount } from "svelte";
   import { EditorView, minimalSetup } from "codemirror";
 
-  let {
-    primes = $bindable(),
-    editorFullscreen = $bindable()
-  }: {
-    primes: number[];
-    editorFullscreen: boolean;
-  } = $props();
-
-  let view: EditorView | undefined;
-  let element: HTMLElement;
-
-  const maximumHeightEditor = $derived(
-    EditorView.theme({
-      "&": { maxHeight: editorFullscreen ? "calc(100vh - 150px)" : "300px" },
-      ".cm-scroller": { overflow: "auto" }
-    })
-  );
+  let { primes, editorFullscreen }: { primes: number[]; editorFullscreen: boolean } = $props();
+  let element: HTMLDivElement;
+  let view = $state.raw<EditorView>();
 
   onMount(() => {
-    createEditor();
-    return () => view?.destroy();
+    const editor = new EditorView({
+      parent: element,
+      extensions: [minimalSetup, EditorView.lineWrapping]
+    });
+    view = editor;
+    return () => editor.destroy();
   });
 
   $effect(() => {
-    void primes;
-    setEditorText();
+    view?.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: primes.join(", ") }
+    });
   });
+</script>
 
-  $effect(() => {
-    void editorFullscreen;
-    if (element) {
-      createEditor();
-      setEditorText();
-    }
-  });
+<div
+  bind:this={element}
+  style:--editor-height={editorFullscreen ? "calc(100vh - 150px)" : "300px"}
+></div>
 
-  function createEditor() {
-    if (view) view.destroy();
-    view = new EditorView({
-      parent: element,
-      extensions: [minimalSetup, maximumHeightEditor, EditorView.lineWrapping]
-    });
+<style>
+  div :global(.cm-editor) {
+    max-height: var(--editor-height);
   }
-
-  function setEditorText() {
-    if (view) {
-      view.dispatch(
-        view.state.update({
-          changes: {
-            from: 0,
-            to: view.state.doc.length,
-            insert: primes.join(", ")
-          }
-        })
-      );
-    }
+  div :global(.cm-scroller) {
+    overflow: auto;
   }
-</script>
-
-<div bind:this={element}></div>
+</style>