Migrate to Vite

eslint.config.js → eslint.config.cjs

@@ -11,7 +11,7 @@ const compat = new FlatCompat({
 });
 
 module.exports = tseslint.config(
-  { ignores: ['eslint.config.js'] },
+  { ignores: ['eslint.config.cjs'] },
   // eslint.configs.recommended,
   ...tseslint.configs.recommended,
   // TODO: Enable when ready

public/index.html → index.html

@@ -6,26 +6,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <meta name="theme-color" content="#000000" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script>
-  <script src="%PUBLIC_URL%/externalLibs/index.js"></script>
+  <script src="/externalLibs/index.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
   <script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
   <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/icons/favicon.ico?pr225" />
-  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/apple-touch-icon.png">
+  <link rel="manifest" href="/manifest.json" />
+  <link rel="shortcut icon" href="/icons/favicon.ico?pr225" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
   <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inconsolata&display=block" />
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
   <title>Source Academy</title>
   <meta name="description" content="Immersive experiential environment for learning programming, developed in the School of Computing at the National University of Singapore." />
 </head>
@@ -35,6 +26,7 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "type": "module",
   "name": "frontend",
   "version": "1.4.3",
   "scripts-info": {
@@ -12,12 +13,16 @@
   },
   "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",
+    "build-cra": "cross-env DISABLE_ESLINT_PLUGIN=true NODE_OPTIONS=--max_old_space_size=8192 craco build",
+    "//": "TODO: Add tsc --noEmit to check for type errors",
+    "build": "vite build",
+    "preview": "vite preview",
     "coverage": "./scripts/coverage-fix.sh do && craco 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",
+    "dev": "vite",
     "start": "cross-env DISABLE_ESLINT_PLUGIN=true BROWSER=none PORT=8000 craco start",
     "test": "cross-env TZ=UTF-8 craco test",
     "test-coveralls": "./scripts/test-coveralls.sh",
@@ -106,6 +111,8 @@
     "@babel/runtime": "^7.24.5",
     "@convergencelabs/ace-collab-ext": "^0.6.0",
     "@craco/craco": "^7.1.0",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@rollup/plugin-inject": "^5.0.5",
     "@svgr/webpack": "^8.0.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^15.0.6",
@@ -131,6 +138,7 @@
     "@types/showdown": "^2.0.1",
     "@types/uuid": "^9.0.0",
     "@types/xml2js": "^0.4.11",
+    "@vitejs/plugin-react": "^4.2.1",
     "babel-jest": "^29.7.0",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
@@ -145,6 +153,9 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
     "npm-run-all2": "^6.0.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
@@ -155,13 +166,18 @@
     "react-test-renderer": "^18.2.0",
     "redux-saga-test-plan": "^4.0.6",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.63.6",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "sass": "^1.77.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.1.0",
     "url": "^0.11.1",
+    "vite": "^5.3.2",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-wasm": "^3.3.0",
+    "vite-tsconfig-paths": "^4.3.2",
     "webpack-bundle-analyzer": "^4.9.0"
   },
   "resolutions": {

src/commons/mocks/TeamFormationMocks.ts

@@ -1,12 +1,10 @@
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
+import XLSX from 'xlsx';
 
 import { TeamFormationOverview } from '../../features/teamFormation/TeamFormationTypes';
 import { Role } from '../application/ApplicationTypes';
 import { mockFetchRole, mockFetchStudents } from './UserMocks';
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const XLSX = require('xlsx');
-
 export const mockTeamFormationOverviews: TeamFormationOverview[] = [
   {
     teamId: 1,

src/commons/redux/utils.ts

@@ -7,6 +7,7 @@ import {
 import * as Sentry from '@sentry/browser';
 import { SagaIterator } from 'redux-saga';
 import { StrictEffect, takeEvery } from 'redux-saga/effects';
+import type { ErrorPayload } from 'vite';
 
 /**
  * Creates actions, given a base name and base actions
@@ -87,12 +88,12 @@ export function saferTakeEvery<
 
 function handleUncaughtError(error: any) {
   if (process.env.NODE_ENV === 'development') {
-    // react-error-overlay is a "special" package that's automatically included
-    // in development mode by CRA
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    import('react-error-overlay').then(reo => reo.reportRuntimeError(error));
+    const showErrorOverlay = (err: Partial<ErrorPayload['err']>) => {
+      const ErrorOverlay = customElements.get('vite-error-overlay');
+      if (ErrorOverlay == null) return;
+      document.body.appendChild(new ErrorOverlay(err));
+    };
+    showErrorOverlay(error);
   }
   Sentry.captureException(error);
   console.error(error);

src/commons/sagas/RequestsSaga.ts

@@ -1,6 +1,7 @@
 import { call } from 'redux-saga/effects';
 import { backendParamsToProgressStatus } from 'src/features/grading/GradingUtils';
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
+import XLSX from 'xlsx';
 
 import {
   AchievementGoal,
@@ -57,9 +58,6 @@ import Constants from '../utils/Constants';
 import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { request } from '../utils/RequestHelper';
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const XLSX = require('xlsx');
-
 /**
  * GET /
  * (health check)

src/commons/sagas/SafeEffects.ts

@@ -8,19 +8,20 @@ import {
   takeLatest,
   takeLeading
 } from 'redux-saga/effects';
+import type { ErrorPayload } from 'vite';
 
 // it's not possible to abstract the two functions into HOF over takeEvery and takeLatest
 // without stepping out of TypeScript's type system because the type system does not support
 // higher-kinded types (type parameters that take )
 
 function handleUncaughtError(error: any) {
   if (process.env.NODE_ENV === 'development') {
-    // react-error-overlay is a "special" package that's automatically included
-    // in development mode by CRA
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    import('react-error-overlay').then(reo => reo.reportRuntimeError(error));
+    const showErrorOverlay = (err: Partial<ErrorPayload['err']>) => {
+      const ErrorOverlay = customElements.get('vite-error-overlay');
+      if (ErrorOverlay == null) return;
+      document.body.appendChild(new ErrorOverlay(err));
+    };
+    showErrorOverlay(error);
   }
   Sentry.captureException(error);
   console.error(error);

src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts

@@ -1,4 +1,5 @@
-import { compileAndRun as compileAndRunCCode } from '@sourceacademy/c-slang/ctowasm/dist/index';
+/* eslint-disable-file */
+// import { compileAndRun as compileAndRunCCode } from '@sourceacademy/c-slang/ctowasm/dist/index';
 import { tokenizer } from 'acorn';
 import { Context, interrupt, Result, resume, runFilesInContext } from 'js-slang';
 import { ACORN_PARSE_OPTIONS, TRY_AGAIN } from 'js-slang/dist/constants';
@@ -9,7 +10,6 @@ import { SagaIterator } from 'redux-saga';
 import { call, put, race, select, take } from 'redux-saga/effects';
 import * as Sourceror from 'sourceror';
 import InterpreterActions from 'src/commons/application/actions/InterpreterActions';
-import { makeCCompilerConfig, specialCReturnObject } from 'src/commons/utils/CToWasmHelper';
 import { javaRun } from 'src/commons/utils/JavaHelper';
 import StoriesActions from 'src/features/stories/StoriesActions';
 
@@ -209,46 +209,48 @@ export function* evalCodeSaga(
   }
 
   async function cCompileAndRun(cCode: string, context: Context) {
-    const cCompilerConfig = await makeCCompilerConfig(cCode, context);
-    return await compileAndRunCCode(cCode, cCompilerConfig)
-      .then(compilationResult => {
-        if (compilationResult.status === 'failure') {
-          // report any compilation failure
-          reportCCompilationError(
-            `Compilation failed with the following error(s):\n\n${compilationResult.errorMessage}`,
-            context
-          );
-          return {
-            status: 'error',
-            context
-          };
-        }
-        if (compilationResult.warnings.length > 0) {
-          return {
-            status: 'finished',
-            context,
-            value: {
-              toReplString: () =>
-                `Compilation and program execution successful with the following warning(s):\n${compilationResult.warnings.join(
-                  '\n'
-                )}`
-            }
-          };
-        }
-        if (specialCReturnObject === null) {
-          return {
-            status: 'finished',
-            context,
-            value: { toReplString: () => 'Compilation and program execution successful.' }
-          };
-        }
-        return { status: 'finished', context, value: specialCReturnObject };
-      })
-      .catch((e: any): Result => {
-        console.log(e);
-        reportCRuntimeError(e.message, context);
-        return { status: 'error' };
-      });
+    // const cCompilerConfig = await makeCCompilerConfig(cCode, context);
+    // FIXME: Restore
+    return Promise.resolve({ status: 'error' });
+    // return await compileAndRunCCode(cCode, cCompilerConfig)
+    //   .then(compilationResult => {
+    //     if (compilationResult.status === 'failure') {
+    //       // report any compilation failure
+    //       reportCCompilationError(
+    //         `Compilation failed with the following error(s):\n\n${compilationResult.errorMessage}`,
+    //         context
+    //       );
+    //       return {
+    //         status: 'error',
+    //         context
+    //       };
+    //     }
+    //     if (compilationResult.warnings.length > 0) {
+    //       return {
+    //         status: 'finished',
+    //         context,
+    //         value: {
+    //           toReplString: () =>
+    //             `Compilation and program execution successful with the following warning(s):\n${compilationResult.warnings.join(
+    //               '\n'
+    //             )}`
+    //         }
+    //       };
+    //     }
+    //     if (specialCReturnObject === null) {
+    //       return {
+    //         status: 'finished',
+    //         context,
+    //         value: { toReplString: () => 'Compilation and program execution successful.' }
+    //       };
+    //     }
+    //     return { status: 'finished', context, value: specialCReturnObject };
+    //   })
+    //   .catch((e: any): Result => {
+    //     console.log(e);
+    //     reportCRuntimeError(e.message, context);
+    //     return { status: 'error' };
+    //   });
   }
 
   const isNonDet: boolean = context.variant === Variant.NON_DET;

src/commons/utils/JavaHelper.ts

@@ -76,7 +76,8 @@ export async function javaRun(
       const { proxy } = createModuleProxy(module, moduleFuncs[module]);
       return { default: proxy };
     }
-    return await import(`java-slang/dist/jvm/stdlib/${path}.js`);
+    // FIXME: Investigate
+    return await import(/* @vite-ignore */ `java-slang/dist/jvm/stdlib/${path}.js`);
   };
 
   const stdout = (str: string) => {

src/pages/academy/gameSimulator/subcomponents/chapterSimulator/ChapterSimulatorTextLoader.tsx

@@ -1,4 +1,4 @@
-import 'ace-builds/webpack-resolver';
+import 'ace-builds/esm-resolver';
 
 import { Button, Classes, Tab, Tabs } from '@blueprintjs/core';
 import { useState } from 'react';

src/styles/_achievementdashboard.scss

@@ -629,7 +629,7 @@
         color: white;
         display: flex;
         flex-direction: column;
-        height: $view-height / 3;
+        height: calc($view-height / 3);
         justify-content: center;
         margin: 1em auto;
         width: $view-width;

src/styles/index.scss

@@ -1,22 +1,22 @@
 @use 'sass:math';
 
-@import '~normalize.css/normalize.css';
-@import '~@blueprintjs/core/lib/css/blueprint.css';
-@import '~@blueprintjs/datetime/lib/css/blueprint-datetime.css';
-@import '~@blueprintjs/select/lib/css/blueprint-select.css';
-@import '~flexboxgrid/dist/flexboxgrid.css';
-@import '~flexboxgrid-helpers/dist/flexboxgrid-helpers.min.css';
+@import 'normalize.css/normalize.css';
+@import '@blueprintjs/core/lib/css/blueprint.css';
+@import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
+@import '@blueprintjs/select/lib/css/blueprint-select.css';
+@import 'flexboxgrid/dist/flexboxgrid.css';
+@import 'flexboxgrid-helpers/dist/flexboxgrid-helpers.min.css';
 
 // CSS styles for react-mde Markdown editor
 // (currently this editor is only used for grading comments)
 // react-mde-preview.css is excluded to avoid conflict with blueprintjs
 // styles in the preview tab of the editor, providing a more accurate
 // depiction of what the actual comment will look like
-@import '~react-mde/lib/styles/css/react-mde-toolbar.css';
-@import '~react-mde/lib/styles/css/react-mde-editor.css';
-@import '~react-mde/lib/styles/css/react-mde.css';
+@import 'react-mde/lib/styles/css/react-mde-toolbar.css';
+@import 'react-mde/lib/styles/css/react-mde-editor.css';
+@import 'react-mde/lib/styles/css/react-mde.css';
 
-@import '../../node_modules/@blueprintjs/core/lib/scss/variables';
+@import '@blueprintjs/core/lib/scss/variables';
 @import 'global';
 
 @import 'academy';

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -3,8 +3,18 @@
     "baseUrl": ".",
     "outDir": "build/dist",
     "module": "esnext",
-    "target": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext", "es6", "es2015", "es2017"],
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": [
+      "vite/client",
+      "vite-plugin-svgr/client",
+      "jest",
+      "gapi",
+      "gapi.auth2",
+      "gapi.client",
+      "gapi.client.drive",
+      "google.picker"
+    ],
     "sourceMap": true,
     "allowJs": true,
     "jsx": "react-jsx",