Migrate to rsbuild and swc (#3131)

* Remove react-scripts

* Install rspack dependencies

* Migrate and simplify index.html

* Create rsbuild config

* Migrate webpack config

* Fix env var loading

* Fix import types

* Add ESLint plugin in dev mode

* Set up test dependencies

* Migrate jest config

* Use SWV for jest

* Fix test configuration

* Update snapshot serialization

* Fix SVG test issues

* Move import resolver to test utils

* Fix test environment issues with modern jest

* Fix timezone issues

* Fix image loading

* Update more snapshots

* Deduplicate dependencies

* Fix jest module resolution

* Fix some tests

* Fix GitHub callback tests

* Update more snapshots

* Fix tree node creator tests

* Fix `FileExplorerDialog` tests

* Fix most tests

* Fix repository dialog tests

* Fix remaining test cases

* Fix test utils

* Update scripts

* Remove CRACO

* Remove old CRACO config

* Fix and check tsc

* Re-add the ignore warnings for dynamic modules

* Address PR comments

* Update snapshots

Author: RichDom2185

craco.config.js

@@ -0,0 +1,104 @@
+// @ts-check
+
+const ignoreModulePaths = (...paths) => {
+  const moduleRoot = replaceSlashes('/node_modules/');
+  const modulePaths = paths
+    .map(replaceSlashes)
+    .map(path => `(${path}[/\\\\.*])`)
+    .join('|');
+  return moduleRoot + '(?!' + modulePaths + ').*.(js|jsx|ts|tsx)$';
+};
+const replaceSlashes = target => {
+  return target.replaceAll('/', '[/\\\\]');
+};
+
+/** @type {import('jest').Config} */
+export default {
+  moduleDirectories: ['<rootDir>', 'node_modules'],
+  testEnvironment: './jsdom-env.js',
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        sourceMaps: true,
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            decorators: false,
+            dynamicImport: false
+          },
+          baseUrl: '.',
+          transform: {
+            react: {
+              runtime: 'automatic'
+            }
+          }
+        }
+      }
+    ]
+  },
+  transformIgnorePatterns: [
+    // Will give something like
+    // '[/\\\\]node_modules[/\\\\]
+    //  (?!
+    //  (   @ion-phaser[/\\\\]react[/\\\\.*]    )|
+    //  (   js-slang[/\\\\.*]                   )|
+    //  (   array-move[/\\\\.*]                 )|
+    //      ...
+    //  (   comma-separated-tokens[/\\\\.*]   )
+    //  ).*.(js|jsx|ts|tsx)$'
+    ignoreModulePaths(
+      '@ion-phaser/react',
+      'js-slang',
+      'array-move',
+      'konva',
+      'react-konva',
+      'react-debounce-render',
+      'devlop',
+      'hastscript',
+      'hast-to-hyperscript',
+      'hast-util-.+',
+      'mdast-util-.+',
+      'micromark',
+      'micromark-.+',
+      'vfile',
+      'vfile-message',
+      'unist-util-.+',
+      'web-namespaces',
+      'rehype-react',
+      'unified',
+      'bail',
+      'is-plain-obj',
+      'trough',
+      'decode-named-character-reference',
+      'character-entities',
+      'trim-lines',
+      'property-information',
+      'space-separated-tokens',
+      'comma-separated-tokens',
+      'query-string',
+      'decode-uri-component',
+      'split-on-first',
+      'filter-obj',
+      '@sourceacademy/c-slang',
+      'java-parser',
+      'conductor'
+    ),
+    '^.+\\.module\\.(css|sass|scss)$'
+  ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg)$': '<rootDir>/src/fileMock.ts',
+    '\\.svg$': 'identity-obj-proxy',
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    'unist-util-visit-parents/do-not-use-color':
+      '<rootDir>/node_modules/unist-util-visit-parents/lib',
+    'vfile/do-not-use-conditional-minpath': '<rootDir>/node_modules/vfile/lib',
+    'vfile/do-not-use-conditional-minproc': '<rootDir>/node_modules/vfile/lib',
+    'vfile/do-not-use-conditional-minurl': '<rootDir>/node_modules/vfile/lib'
+  },
+  setupFilesAfterEnv: [
+    './src/setupTests.ts', // Setup file for Jest
+    './src/i18n/i18n.ts' // Setup i18next configuration
+  ]
+};

jest.config.js

@@ -0,0 +1,12 @@
+import JSDOMEnvironment from 'jest-environment-jsdom';
+
+// https://stackoverflow.com/a/78051351
+export default class FixJSDOMEnvironment extends JSDOMEnvironment {
+  constructor(...args) {
+    super(...args);
+    this.global.fetch = fetch;
+    this.global.Request = Request;
+    this.global.Response = Response;
+    // And any other missing globals
+  }
+}

jsdom-env.js

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "type": "module",
   "name": "frontend",
   "packageManager": "[email protected]",
   "version": "1.4.3",
@@ -13,18 +14,19 @@
   },
   "scripts": {
     "analyze": "yarn build --stats; webpack-bundle-analyzer build/bundle-stats.json",
-    "build": "cross-env DISABLE_ESLINT_PLUGIN=true NODE_OPTIONS=--max_old_space_size=8192 craco build",
-    "coverage": "./scripts/coverage-fix.sh do && craco test --coverage && ./scripts/coverage-fix.sh undo",
+    "build": "tsc -b && rsbuild build",
+    "coverage": "./scripts/coverage-fix.sh do && yarn test --coverage && ./scripts/coverage-fix.sh undo",
     "format": "eslint --fix src && prettier --write \"src/**/*.{js,jsx,ts,tsx}\" && prettier --write --parser scss \"src/**/*.scss\"",
     "format:tsx": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx}\"",
     "format:scss": "prettier --list-different --parser scss \"src/**/*.scss\"",
     "format:ci": "yarn run format:tsx && yarn run format:scss",
-    "start": "cross-env DISABLE_ESLINT_PLUGIN=true BROWSER=none PORT=8000 craco start",
-    "test": "cross-env TZ=UTF-8 craco test",
+    "start": "rsbuild dev",
+    "test": "cross-env TZ=Asia/Singapore jest",
     "test-coveralls": "./scripts/test-coveralls.sh",
     "update-ui-snapshots": "jest --updateSnapshot",
     "eslint": "eslint src",
-    "prepare": "husky"
+    "prepare": "husky",
+    "preview": "rsbuild preview"
   },
   "dependencies": {
     "@blueprintjs/core": "^5.10.1",
@@ -98,6 +100,9 @@
     "sourceror": "^0.8.5",
     "unified": "^11.0.0",
     "uuid": "^11.0.2",
+    "workbox-core": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-routing": "^7.3.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
     "xml2js": "^0.6.0",
     "yareco": "^0.1.5"
@@ -108,8 +113,15 @@
     "@babel/preset-typescript": "^7.24.1",
     "@babel/runtime": "^7.24.5",
     "@convergencelabs/ace-collab-ext": "^0.6.0",
-    "@craco/craco": "^7.1.0",
+    "@rsbuild/core": "^1.3.12",
+    "@rsbuild/plugin-eslint": "^1.1.1",
+    "@rsbuild/plugin-node-polyfill": "^1.3.0",
+    "@rsbuild/plugin-react": "^1.3.0",
+    "@rsbuild/plugin-sass": "^1.3.1",
+    "@rsbuild/plugin-svgr": "^1.2.0",
     "@svgr/webpack": "^8.0.0",
+    "@swc/core": "^1.11.22",
+    "@swc/jest": "^0.2.38",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.4.3",
@@ -120,6 +132,7 @@
     "@types/gapi.client": "^1.0.5",
     "@types/gapi.client.drive-v3": "^0.0.5",
     "@types/google.picker": "^0.0.39",
+    "@types/identity-obj-proxy": "^3",
     "@types/jest": "^29.0.0",
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.5",
@@ -146,6 +159,9 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "npm-run-all2": "^7.0.0",
     "os-browserify": "^0.3.0",
     "path": "^0.12.7",
@@ -154,7 +170,6 @@
     "prettier": "^3.3.3",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
-    "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",
     "redux-saga-test-plan": "^4.0.6",
     "resize-observer-polyfill": "^1.5.1",