chore(deps): upgrade vitest 4, eslint 9, and tsconfig to ES2024

package.json

@@ -26,22 +26,24 @@
     "recharts": "^3.7.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.1.15",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.4",
-    "@vitest/ui": "^3.2.4",
+    "@vitest/ui": "^4.0.18",
     "cross-env": "^10.1.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.39.4",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^16.4.0",
     "jsdom": "^28.1.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.18",
     "wrangler": "^4.71.0"
   }
 }

src/apps/math-learning/components/OpenSetInvestigator.tsx

@@ -252,14 +252,11 @@ const OpenSetInvestigator: React.FC = () => {
               const t1Name = topologyDefinitions[t1].name;
               const t2Name = topologyDefinitions[t2].name;
 
-              let message = '';
-              if (comparison === 'finer') {
-                message = `${t1Name} topology is finer than ${t2Name} topology`;
-              } else if (comparison === 'coarser') {
-                message = `${t1Name} topology is coarser than ${t2Name} topology`;
-              } else {
-                message = `${t1Name} and ${t2Name} topologies are incomparable`;
-              }
+              const message = comparison === 'finer'
+                ? `${t1Name} topology is finer than ${t2Name} topology`
+                : comparison === 'coarser'
+                  ? `${t1Name} topology is coarser than ${t2Name} topology`
+                  : `${t1Name} and ${t2Name} topologies are incomparable`;
 
               return (
                 <div className={styles.comparisonMessage}>

src/apps/math-learning/components/VennDiagram.tsx

@@ -168,8 +168,8 @@ const VennDiagram: React.FC<VennDiagramProps> = ({ setA, setB, setC }) => {
 
     // Position elements based on set membership
     universe.forEach(el => {
-      let x = centerX;
-      let y = centerY;
+      let x: number;
+      let y: number;
 
       const inA = setA.includes(el);
       const inB = setB.includes(el);

src/apps/metrics-systems/components/TimeseriesGraph.tsx

@@ -100,15 +100,11 @@ export const TimeseriesGraph = ({
       // Add y-axis labels
       if (i < 4) { // Don't label the top line
         const value = maxValue - (i / 4) * range
-        let label = ''
-
-        if (unit === 'ms' && value > 1000) {
-          label = `${(value / 1000).toFixed(1)}s`
-        } else if (unit === '%') {
-          label = `${Math.round(value)}%`
-        } else {
-          label = `${Math.round(value)}`
-        }
+        const label = unit === 'ms' && value > 1000
+          ? `${(value / 1000).toFixed(1)}s`
+          : unit === '%'
+            ? `${Math.round(value)}%`
+            : `${Math.round(value)}`
 
         ctx.fillText(label, width - 2, y - 2)
       }

src/hooks/__tests__/useGolfGame.gameCreation.test.tsx

@@ -89,11 +89,11 @@ const mockAdapter = {
 }
 
 vi.mock('../../utils/networkAdapter', () => ({
-  GolfNetworkAdapter: vi.fn().mockImplementation((callbacks: {
+  GolfNetworkAdapter: vi.fn().mockImplementation(function (callbacks: {
     onRoomJoined?: (playerId: string, roomState: Room) => void
     onGameJoined?: (playerId: string, gameState: GolfGameState) => void
     onNewGameStarted?: (gameId: string, previousGameId?: string) => void
-  }) => {
+  }) {
     // Store callbacks for later use in tests
     mockAdapter._callbacks = callbacks
     // Update roomState when onRoomJoined is called

src/hooks/__tests__/useGolfGame.navigation.test.tsx

@@ -28,7 +28,7 @@ const mockAdapter = {
 }
 
 vi.mock('../../utils/networkAdapter', () => ({
-  GolfNetworkAdapter: vi.fn().mockImplementation(() => mockAdapter)
+  GolfNetworkAdapter: vi.fn().mockImplementation(function () { return mockAdapter })
 }))
 
 // Mock window.location

src/hooks/__tests__/useGolfGame.newGameNotifications.test.tsx

@@ -33,7 +33,7 @@ const mockNetworkAdapter = {
 }
 
 vi.mock('@/utils/networkAdapter', () => ({
-  GolfNetworkAdapter: vi.fn().mockImplementation((callbacks) => {
+  GolfNetworkAdapter: vi.fn().mockImplementation(function (callbacks) {
     mockNetworkAdapter._callbacks = callbacks
     return mockNetworkAdapter
   })

src/hooks/__tests__/useGolfGame.permalink.test.tsx

@@ -10,7 +10,7 @@ vi.mock('react-router-dom', () => ({
 
 // Simple mock for the network adapter
 vi.mock('../../utils/networkAdapter', () => ({
-  GolfNetworkAdapter: vi.fn().mockImplementation(() => ({
+  GolfNetworkAdapter: vi.fn().mockImplementation(function () { return {
     connect: vi.fn(),
     disconnect: vi.fn(),
     joinRoom: vi.fn(),
@@ -26,7 +26,7 @@ vi.mock('../../utils/networkAdapter', () => ({
     discardDrawn: vi.fn(),
     knock: vi.fn(),
     hideCards: vi.fn()
-  }))
+  }})
 }))
 
 describe('useGolfGame permalink functionality', () => {

src/utils/__tests__/gameCanvas.test.ts

@@ -348,10 +348,8 @@ describe('Game Canvas Setup', () => {
     })
 
     it('should handle canvas resizing', () => {
-      let canvas = createMockCanvas(1000, 800)
-
       // Simulate resize
-      canvas = createMockCanvas(800, 640)
+      const canvas = createMockCanvas(800, 640)
 
       expect(canvas.width).toBe(800)
       expect(canvas.height).toBe(640)

src/utils/audioSystem.ts

@@ -421,7 +421,7 @@ export class AudioSystem implements IAudioSystem {
       const progress = noteTime / duration
 
       // Same envelope shape as Web Audio version
-      let envelope = 0
+      let envelope: number
       if (progress < 0.1) {
         // Attack phase - linear ramp up
         envelope = progress / 0.1

src/utils/gameUtils.ts

@@ -10,7 +10,7 @@ export function generateRandomColor(): [number, number, number] {
   const x = c * (1 - Math.abs((h % 2) - 1))
   const m = lightness - c / 2
 
-  let r: number = 0, g: number = 0, b: number = 0
+  let r: number, g: number, b: number
   if (h < 1) { r = c; g = x; b = 0; }
   else if (h < 2) { r = x; g = c; b = 0; }
   else if (h < 3) { r = 0; g = c; b = x; }

src/utils/networkManager.ts

@@ -103,7 +103,7 @@ export class NetworkManager {
 
             // If we have accumulated JSON that couldn't be parsed, it's an error
             if (currentJson.trim()) {
-              throw new Error('Incomplete JSON message')
+              throw new Error('Incomplete JSON message', { cause: firstError })
             }
 
             // Process all successfully parsed messages

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2024",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,