Upgrade to TS 5.8, ESLint v9, Vite v6 and other dependencies (#334)

RichDom2185 · web-flow · commit 30ee29647247 · 2025-04-03T13:12:28.000+08:00
* Update workflow

* Make submodule protocol agnostic

* Reformat

* Update ESLint to v9 and related dependencies

* Fix auto-fixable ESLint warnings

* Bump TS to 5.7 and sass to 1.85

* Deduplicate dependencies

* Fix compile errors post-updates

* Update gitignore

* Add package manager version to package.json

* Fix auto-fixable problems

* Fix ESLint breaking change

* Update TS config files for safety

* Fix test script

* Update lockfile post-merge

* Deduplicate dependencies

* Upgrade TypeScript to v5.8

* Upgrade Vite to v6

* Deduplicate dependencies
diff --git a/.github/workflows/pages-deploy.yml b/.github/workflows/pages-deploy.yml
@@ -30,7 +30,7 @@ jobs:
         run: cp -r src/java build
 
       - name: Deploy 🚀
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }} 
           publish_dir: ./build # The folder the action should deploy.
diff --git a/.gitignore b/.gitignore
@@ -4,7 +4,6 @@
 node_modules/
 devserver/node_modules
 build/*
-/package-lock.json
 coverage/
 
 scripts/dist
diff --git a/.gitmodules b/.gitmodules
@@ -1,3 +1,3 @@
 [submodule "src/java/java-packages"]
 	path = src/java/java-packages
-	url = https://github.com/source-academy/java-packages
+	url = ../../source-academy/java-packages.git
diff --git a/devserver/tsconfig.json b/devserver/tsconfig.json
@@ -17,6 +17,7 @@
 
     /* Linting */
     "strict": true,
+    "forceConsistentCasingInFileNames": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
diff --git a/package.json b/package.json
@@ -63,32 +63,32 @@
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/three": "^0.163.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "acorn": "^8.8.1",
     "acorn-jsx": "^5.3.2",
     "astring": "^1.8.6",
     "chalk": "^5.0.1",
     "commander": "^12.0.0",
     "console-table-printer": "^2.11.1",
     "esbuild": "^0.25.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint": "^9.21.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.11.0",
     "http-server": "^0.12.3",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.4.1",
     "re-resizable": "^6.9.11",
-    "sass": "^1.66.1",
+    "sass": "^1.85.0",
     "ts-jest": "^29.1.2",
     "typedoc": "^0.25.12",
-    "typescript": "^5.4.3",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.15",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.4",
     "yarnhook": "^0.5.1"
   },
   "dependencies": {
@@ -105,7 +105,7 @@
     "dayjs": "^1.10.4",
     "events": "^3.3.0",
     "gl-matrix": "^3.3.0",
-    "js-slang": "^1.0.74",
+    "js-slang": "^1.0.81",
     "lodash": "^4.17.21",
     "mqtt": "^4.3.7",
     "nbody": "^0.1.1",
@@ -133,8 +133,5 @@
       "scripts/jest.config.js"
     ]
   },
-  "resolutions": {
-    "**/gl": "^8.0.2"
-  },
   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }
diff --git a/scripts/src/build/docs/__tests__/test_mocks/tsconfig.json b/scripts/src/build/docs/__tests__/test_mocks/tsconfig.json
@@ -26,6 +26,7 @@
     "skipLibCheck": true,
     /* The strict flag enables a wide range of type checking behavior that results in stronger guarantees of program correctness. */
     "strict": true,
+    "forceConsistentCasingInFileNames": true,
     /* The target setting changes which JS features are downleveled and which are left intact. */
     "target": "es6",
     /* In some cases where no type annotations are present, TypeScript will fall back to a type of any for a variable when it cannot infer the type. */
diff --git a/scripts/src/build/prebuild/lint.ts b/scripts/src/build/prebuild/lint.ts
@@ -1,14 +1,7 @@
 import chalk from 'chalk';
-/*
-  Unfortunately, people like to leave parts of their API
-  undocumented, so using the FlatConfig linter with the
-  current version of eslint means we can't get any
-  typing for it
-*/
-// @ts-expect-error 2305
 import { loadESLint, type ESLint } from 'eslint';
 import { lintFixOption, retrieveBundlesAndTabs, wrapWithTimer } from '@src/commandUtils';
-import { findSeverity, divideAndRound, type Severity, type AwaitedReturn } from '../utils';
+import { divideAndRound, findSeverity, type AwaitedReturn, type Severity } from '../utils';
 import { createPrebuildCommand, createPrebuildCommandHandler, type PrebuildOptions } from './utils';
 
 interface LintResults {
diff --git a/scripts/src/linting/__tests__/typeimports.test.ts b/scripts/src/linting/__tests__/typeimports.test.ts
@@ -3,11 +3,14 @@ import typeImportsPlugin from '../typeimports';
 
 describe('Test collateTypeImports', () => {
   const tester = new RuleTester({
-    parser: require.resolve('@typescript-eslint/parser'),
-    parserOptions: {
-      ecmaVersion: 6,
-      sourceType: 'module'
-    }
+    'languageOptions': {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      parser: require('@typescript-eslint/parser'),
+      parserOptions: {
+        ecmaVersion: 6,
+        sourceType: 'module'
+      }
+    },
   });
 
   tester.run(
diff --git a/scripts/src/linting/typeimports.ts b/scripts/src/linting/typeimports.ts
@@ -28,7 +28,6 @@ const typeImportsPlugin = {
       },
       create: context => ({
         ImportDeclaration(node) {
-          // @ts-expect-error import kind is unknown property
           if (node.importKind === 'type' || node.specifiers.length === 0) return;
 
           // @ts-expect-error import kind is unknown property
diff --git a/scripts/src/templates/index.ts b/scripts/src/templates/index.ts
@@ -8,7 +8,6 @@ import { addNew as addNewTab } from './tab';
 
 async function askMode(rl: Interface) {
   while (true) {
-    // eslint-disable-next-line no-await-in-loop
     const mode = await askQuestion('What would you like to create? (module/tab)', rl);
     if (mode !== 'module' && mode !== 'tab') {
       warn("Please answer with only 'module' or 'tab'.");
diff --git a/scripts/src/templates/module.ts b/scripts/src/templates/module.ts
@@ -1,9 +1,7 @@
 import fs from 'fs/promises';
-
 import type { Interface } from 'readline/promises';
 import { promiseAll } from '@src/commandUtils';
 import { type ModuleManifest, retrieveManifest } from '@src/manifest';
-
 import { askQuestion, success, warn } from './print';
 import { type Options, isSnakeCase } from './utilities';
 
@@ -12,7 +10,6 @@ export const check = (manifest: ModuleManifest, name: string) => Object.keys(man
 
 async function askModuleName(manifest: ModuleManifest, rl: Interface) {
   while (true) {
-    // eslint-disable-next-line no-await-in-loop
     const name = await askQuestion('What is the name of your new module? (eg. binary_tree)', rl);
     if (isSnakeCase(name) === false) {
       warn('Module names must be in snake case. (eg. binary_tree)');
diff --git a/scripts/src/templates/tab.ts b/scripts/src/templates/tab.ts
@@ -1,10 +1,7 @@
-/* eslint-disable no-await-in-loop */
 import fs from 'fs/promises';
-
 import type { Interface } from 'readline/promises';
 import { promiseAll } from '@src/commandUtils';
 import { type ModuleManifest, retrieveManifest } from '@src/manifest';
-
 import { check as _check } from './module';
 import { askQuestion, success, warn } from './print';
 import { type Options, isPascalCase } from './utilities';
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
@@ -15,4 +17,4 @@
     "./src/templates/templates/**",
     "./src/build/docs/__tests__/test_mocks"
   ]
-}
+}
diff --git a/src/bundles/arcade_2d/gameobject.ts b/src/bundles/arcade_2d/gameobject.ts
@@ -147,7 +147,6 @@ export abstract class InteractableGameObject extends RenderableGameObject implem
     }
     // Use getBounds to check if two objects overlap, checking the shape of the area before checking overlap.
     // Since getBounds() returns a Rectangle, it will be unable to check the actual intersection of non-rectangular shapes.
-    // eslint-disable-next-line new-cap
     return Phaser.Geom.Intersects.RectangleToRectangle(this.phaserGameObject.getBounds(), other.phaserGameObject.getBounds());
   }
 }
diff --git a/src/bundles/arcade_2d/phaserScene.ts b/src/bundles/arcade_2d/phaserScene.ts
@@ -131,7 +131,6 @@ export class PhaserScene extends Phaser.Scene {
     this.handleAudioUpdates();
 
     // Delay KeyUp events, so that low FPS can still detect KeyDown.
-    // eslint-disable-next-line array-callback-return
     this.delayedKeyUpEvents.forEach((event: Function) => event());
     this.delayedKeyUpEvents.clear();
 
@@ -316,7 +315,7 @@ export class PhaserScene extends Phaser.Scene {
         // Update the image of Phaser GameObject
         if (gameObject.hasRenderUpdates() || this.shouldRerenderGameObjects) {
           const color = gameObject.getColor();
-          // eslint-disable-next-line new-cap
+
           const intColor = Phaser.Display.Color.GetColor32(color[0], color[1], color[2], color[3]);
           const flip = gameObject.getFlipState();
           if (gameObject instanceof TextGameObject) {
diff --git a/src/bundles/curve/curves_webgl.ts b/src/bundles/curve/curves_webgl.ts
@@ -234,7 +234,6 @@ export class CurveDrawn implements ReplResult {
     gl.clearDepth(1.0); // Clear everything
     gl.enable(gl.DEPTH_TEST); // Enable depth testing
     gl.depthFunc(gl.LEQUAL); // Near things obscure far things
-    // eslint-disable-next-line no-bitwise
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
     const transMat = mat4.create();
@@ -313,7 +312,6 @@ export class CurveDrawn implements ReplResult {
   };
 }
 
-// eslint-disable-next-line complexity
 export function generateCurve(
   scaleMode: ScaleMode,
   drawMode: DrawMode,
diff --git a/src/bundles/curve/functions.ts b/src/bundles/curve/functions.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import context from 'js-slang/context';
 import { type Curve, type CurveDrawn, generateCurve, Point } from './curves_webgl';
 import {
diff --git a/src/bundles/game/functions.ts b/src/bundles/game/functions.ts
@@ -14,8 +14,6 @@
  * @author Gokul Rajiv
  */
 
-/* eslint-disable consistent-return, @typescript-eslint/default-param-last, @typescript-eslint/no-shadow, @typescript-eslint/no-unused-vars */
-
 import context from 'js-slang/context';
 import { type List, head, tail, is_pair, accumulate } from 'js-slang/dist/stdlib/list';
 import Phaser from 'phaser';
@@ -153,7 +151,6 @@ function set_type(
  * @hidden
  */
 function throw_error(message: string): never {
-  // eslint-disable-next-line no-caller
   throw new Error(`${arguments.callee.caller.name}: ${message}`);
 }
 
diff --git a/src/bundles/physics_2d/PhysicsObject.ts b/src/bundles/physics_2d/PhysicsObject.ts
@@ -1,7 +1,3 @@
-/* eslint-disable new-cap */
-// We have to disable linting rules since Box2D functions do not
-// follow the same guidelines as the rest of the codebase.
-
 import {
   type b2Body,
   type b2Shape,
diff --git a/src/bundles/physics_2d/PhysicsWorld.ts b/src/bundles/physics_2d/PhysicsWorld.ts
@@ -1,7 +1,3 @@
-/* eslint-disable new-cap */
-// We have to disable linting rules since Box2D functions do not
-// follow the same guidelines as the rest of the codebase.
-
 import {
   type b2Body,
   type b2Fixture,
diff --git a/src/bundles/physics_2d/functions.ts b/src/bundles/physics_2d/functions.ts
@@ -1,7 +1,3 @@
-/* eslint-disable new-cap */
-// We have to disable linting rules since Box2D functions do not
-// follow the same guidelines as the rest of the codebase.
-
 /**
  * @module physics_2d
  * @author Muhammad Fikri Bin Abdul Kalam
diff --git a/src/bundles/physics_2d/index.ts b/src/bundles/physics_2d/index.ts
@@ -48,7 +48,7 @@
  * The suggested time step is 1/60 (seconds).
  *
  * Visualization of the physics world can also be seen in the display tab.
-*
+ *
  * The following example simulates a free fall of a circle object.
  *
  * ```
diff --git a/src/bundles/physics_2d/types.ts b/src/bundles/physics_2d/types.ts
@@ -1,7 +1,3 @@
-/* eslint-disable new-cap */
-// We have to disable linting rules since Box2D functions do not
-// follow the same guidelines as the rest of the codebase.
-
 import { b2Vec2 } from '@box2d/core';
 import type { ReplResult } from '../../typings/type_helpers';
 
diff --git a/src/bundles/pix_n_flix/functions.ts b/src/bundles/pix_n_flix/functions.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-shadow */
 import {
   DEFAULT_WIDTH,
   DEFAULT_HEIGHT,
@@ -191,7 +190,6 @@ function draw(timestamp: number): void {
     prevTime = timestamp;
     totalElapsedTime += elapsed;
     if (toRunLateQueue) {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       lateQueue();
       toRunLateQueue = false;
     }
diff --git a/src/bundles/robot_simulation/engine/Render/helpers/Camera.ts b/src/bundles/robot_simulation/engine/Render/helpers/Camera.ts
@@ -40,7 +40,7 @@ export function getCamera(cameraOptions: CameraOptions): THREE.Camera {
       return camera;
     }
     default: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const _: never = cameraOptions;
       throw new Error('Unknown camera type');
     }
diff --git a/src/bundles/robot_simulation/ev3_functions.ts b/src/bundles/robot_simulation/ev3_functions.ts
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-
 import type { Motor } from './controllers/ev3/components/Motor';
 import { motorConfig } from './controllers/ev3/ev3/default/config';
 import type { ColorSensor } from './controllers/ev3/sensor/ColorSensor';
diff --git a/src/bundles/rune/functions.ts b/src/bundles/rune/functions.ts
@@ -945,7 +945,6 @@ export class HollusionRune extends DrawnRune {
           = Math.floor(timeInMs / (period / frameCount)) % frameCount;
       const fbObject = frameBuffer[framePos];
       gl.clearColor(1.0, 1.0, 1.0, 1.0); // Set clear color to white, fully opaque
-      // eslint-disable-next-line no-bitwise
       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the viewport
 
       gl.activeTexture(gl.TEXTURE0);
diff --git a/src/bundles/rune/rune.ts b/src/bundles/rune/rune.ts
@@ -219,7 +219,6 @@ export function drawRunesToFrameBuffer(
     const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
     function isPowerOf2(value) {
-      // eslint-disable-next-line no-bitwise
       return (value & (value - 1)) === 0;
     }
     // Because images have to be downloaded over the internet
diff --git a/src/bundles/rune/runes_webgl.ts b/src/bundles/rune/runes_webgl.ts
@@ -75,7 +75,6 @@ export function getWebGlFromCanvas(
   gl.clearColor(1.0, 1.0, 1.0, 1.0); // Set clear color to white, fully opaque
   gl.enable(gl.DEPTH_TEST); // Enable depth testing
   gl.depthFunc(gl.LESS); // Near things obscure far things (this is default setting can omit)
-  // eslint-disable-next-line no-bitwise
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the viewport
   return gl;
 }
diff --git a/src/bundles/sound/functions.ts b/src/bundles/sound/functions.ts
@@ -1,4 +1,3 @@
-/* eslint-disable new-cap, @typescript-eslint/naming-convention */
 import context from 'js-slang/context';
 import {
   pair,
@@ -104,7 +103,6 @@ function play_recording_signal() {
   play(sine_sound(1200, recording_signal_ms / 1000));
 }
 
-// eslint-disable-next-line @typescript-eslint/no-shadow
 function process(data) {
   const audioContext = new AudioContext();
   const blob = new Blob(data);
diff --git a/src/bundles/sound_matrix/list.ts b/src/bundles/sound_matrix/list.ts
@@ -1,5 +1,3 @@
-/* eslint-disable no-else-return, no-lonely-if, operator-assignment, prefer-template */
-
 // list.js: Supporting lists in the Scheme style, using pairs made
 //          up of two-element JavaScript array (vector)
 
diff --git a/src/bundles/stereo_sound/functions.ts b/src/bundles/stereo_sound/functions.ts
@@ -1,4 +1,3 @@
-/* eslint-disable new-cap, @typescript-eslint/naming-convention */
 import context from 'js-slang/context';
 import {
   accumulate,
@@ -103,7 +102,6 @@ function play_recording_signal() {
   play(sine_sound(1200, recording_signal_duration_ms / 1000));
 }
 
-// eslint-disable-next-line @typescript-eslint/no-shadow
 function process(data: any[] | undefined) {
   const audioContext = new AudioContext();
   const blob = new Blob(data);
diff --git a/src/bundles/unittest/mocks.ts b/src/bundles/unittest/mocks.ts
@@ -1,5 +1,4 @@
 import { pair, list, vector_to_list } from 'js-slang/dist/stdlib/list';
-/* eslint-disable import/prefer-default-export */
 
 /**
  * Mocks a function `fun`.
diff --git a/src/tabs/Pixnflix/index.tsx b/src/tabs/Pixnflix/index.tsx
@@ -1,6 +1,5 @@
 import { Button, ButtonGroup, Divider, NumericInput } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-// eslint-disable-next-line @typescript-eslint/no-shadow
 import React, { type ChangeEvent, type DragEvent } from 'react';
 import {
   DEFAULT_FPS,
diff --git a/src/tabs/Unittest/index.tsx b/src/tabs/Unittest/index.tsx
diff --git a/src/tabs/physics_2d/DebugDrawCanvas.tsx b/src/tabs/physics_2d/DebugDrawCanvas.tsx
diff --git a/src/tsconfig.json b/src/tsconfig.json
diff --git a/yarn.lock b/yarn.lock
