Migrate to Vite

.eslintrc.json

@@ -1,6 +1,6 @@
 {
-  "extends": ["react-app", "plugin:@typescript-eslint/recommended"],
-  "plugins": ["simple-import-sort"],
+  "extends": ["plugin:@typescript-eslint/recommended"],
+  "plugins": ["react", "react-hooks", "simple-import-sort"],
   "rules": {
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/interface-name-prefix": "off",
@@ -12,6 +12,8 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/ban-types": "off",
-    "simple-import-sort/imports": "error"
+    "@typescript-eslint/no-unused-vars": ["warn", { "args": "none" }],
+    "simple-import-sort/imports": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

public/index.html → index.html

@@ -6,16 +6,16 @@
   <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.
@@ -35,6 +35,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

@@ -12,14 +12,14 @@
   },
   "scripts": {
     "analyze": "yarn build --stats; webpack-bundle-analyzer build/bundle-stats.json",
-    "build": "cross-env EXTEND_ESLINT=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": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
+    "coverage": "./scripts/coverage-fix.sh do && vitest watch --coverage && ./scripts/coverage-fix.sh undo",
     "format": "eslint --ext \".js,.jsx,.ts,.tsx\" --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 EXTEND_ESLINT=true BROWSER=none PORT=8000 craco start",
-    "test": "cross-env TZ=UTF-8 craco test",
+    "start": "vite",
+    "test": "cross-env TZ=UTF-8 vitest watch",
     "test-coveralls": "./scripts/test-coveralls.sh",
     "update-ui-snapshots": "jest --updateSnapshot",
     "eslint": "eslint --ext \".js,.jsx,.ts,.tsx\" src",
@@ -45,6 +45,7 @@
     "array-move": "^4.0.0",
     "browserfs": "^1.4.3",
     "classnames": "^2.3.2",
+    "fast-levenshtein": "^3.0.0",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "js-slang": "^1.0.29",
@@ -89,7 +90,7 @@
     "yareco": "^0.1.5"
   },
   "devDependencies": {
-    "@craco/craco": "^7.1.0",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -118,22 +119,28 @@
     "@types/showdown": "^2.0.1",
     "@types/uuid": "^8.3.4",
     "@types/xml2js": "^0.4.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "@vitejs/plugin-react": "^4.0.0",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
+    "eslint": "^8.42.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
+    "events": "^3.3.0",
     "https-browserify": "^1.0.0",
     "husky": "^8.0.2",
     "npm-run-all": "^4.1.5",
     "os-browserify": "^0.3.0",
     "prettier": "^2.8.8",
     "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",
@@ -143,6 +150,10 @@
     "timers-browserify": "^2.0.12",
     "typescript": "~4.9.0",
     "url": "^0.11.1",
+    "vite": "^4.3.9",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-wasm": "^3.2.2",
+    "vitest": "^0.32.2",
     "webpack-bundle-analyzer": "^4.9.0"
   },
   "browserslist": {

src/pages/academy/storySimulator/subcomponents/StorySimulatorCheckpointTxtLoader.tsx

@@ -1,5 +1,3 @@
-import 'ace-builds/webpack-resolver';
-
 import { Button, Tab, Tabs } from '@blueprintjs/core';
 import React from 'react';
 import { toTxtPath } from 'src/features/game/assets/TextAssets';

src/pages/sicp/subcomponents/__tests__/CodeSnippet.tsx

@@ -1,5 +1,4 @@
 import 'ace-builds';
-import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/ace';
 
 import lzString from 'lz-string';

src/service-worker.ts

@@ -1,66 +1,69 @@
-/// <reference lib="webworker" />
-/* eslint-disable no-restricted-globals */
+// /// <reference lib="webworker" />
+// /* eslint-disable no-restricted-globals */
 
-import { clientsClaim } from 'workbox-core';
-import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
-import { registerRoute } from 'workbox-routing';
+// import { clientsClaim } from 'workbox-core';
+// import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
+// import { registerRoute } from 'workbox-routing';
 
-import { main as eventLoggingMain } from './features/eventLogging/ServiceWorker';
+// import { main as eventLoggingMain } from './features/eventLogging/ServiceWorker';
 
-declare const self: ServiceWorkerGlobalScope;
+// declare const self: ServiceWorkerGlobalScope;
 
-clientsClaim();
+// clientsClaim();
 
-// Precache all of the assets generated by your build process.
-// Their URLs are injected into the manifest variable below.
-// This variable must be present somewhere in your service worker file,
-// even if you decide not to use precaching. See https://cra.link/PWA
-precacheAndRoute(self.__WB_MANIFEST);
+// // Precache all of the assets generated by your build process.
+// // Their URLs are injected into the manifest variable below.
+// // This variable must be present somewhere in your service worker file,
+// // even if you decide not to use precaching. See https://cra.link/PWA
+// precacheAndRoute(self.__WB_MANIFEST);
 
-// Set up App Shell-style routing, so that all navigation requests
-// are fulfilled with your index.html shell. Learn more at
-// https://developers.google.com/web/fundamentals/architecture/app-shell
-const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
-const SW_EXCLUDE_REGEXES = process.env.REACT_APP_SW_EXCLUDE_REGEXES;
-const ignorePathnameRegexps = (JSON.parse(SW_EXCLUDE_REGEXES || '[]') as string[]).map(
-  str => new RegExp(str)
-);
-registerRoute(
-  // Return false to exempt requests from being fulfilled by index.html.
-  ({ request, url }: { request: Request; url: URL }) => {
-    // If this isn't a navigation, skip.
-    if (request.mode !== 'navigate') {
-      return false;
-    }
+// // Set up App Shell-style routing, so that all navigation requests
+// // are fulfilled with your index.html shell. Learn more at
+// // https://developers.google.com/web/fundamentals/architecture/app-shell
+// const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+// const SW_EXCLUDE_REGEXES = process.env.REACT_APP_SW_EXCLUDE_REGEXES;
+// const ignorePathnameRegexps = (JSON.parse(SW_EXCLUDE_REGEXES || '[]') as string[]).map(
+//   str => new RegExp(str)
+// );
+// registerRoute(
+//   // Return false to exempt requests from being fulfilled by index.html.
+//   ({ request, url }: { request: Request; url: URL }) => {
+//     // If this isn't a navigation, skip.
+//     if (request.mode !== 'navigate') {
+//       return false;
+//     }
 
-    // If this is a URL that starts with /_, skip.
-    if (url.pathname.startsWith('/_')) {
-      return false;
-    }
+//     // If this is a URL that starts with /_, skip.
+//     if (url.pathname.startsWith('/_')) {
+//       return false;
+//     }
 
-    // If this looks like a URL for a resource, because it contains
-    // a file extension, skip.
-    if (url.pathname.match(fileExtensionRegexp)) {
-      return false;
-    }
+//     // If this looks like a URL for a resource, because it contains
+//     // a file extension, skip.
+//     if (url.pathname.match(fileExtensionRegexp)) {
+//       return false;
+//     }
 
-    if (ignorePathnameRegexps.find(regexp => regexp.test(url.pathname))) {
-      return false;
-    }
+//     if (ignorePathnameRegexps.find(regexp => regexp.test(url.pathname))) {
+//       return false;
+//     }
 
-    // Return true to signal that we want to use the handler.
-    return true;
-  },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
-);
+//     // Return true to signal that we want to use the handler.
+//     return true;
+//   },
+//   createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+// );
 
-// This allows the web app to trigger skipWaiting via
-// registration.waiting.postMessage({type: 'SKIP_WAITING'})
-self.addEventListener('message', event => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
+// // This allows the web app to trigger skipWaiting via
+// // registration.waiting.postMessage({type: 'SKIP_WAITING'})
+// self.addEventListener('message', event => {
+//   if (event.data && event.data.type === 'SKIP_WAITING') {
+//     self.skipWaiting();
+//   }
+// });
 
-// Any other custom service worker logic can go here.
-eventLoggingMain();
+// // Any other custom service worker logic can go here.
+// eventLoggingMain();
+
+// FIXME: Restore service worker
+export {};

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/popover2/lib/css/blueprint-popover2.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/popover2/lib/css/blueprint-popover2.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 'blueprint';
 

src/vite-env.d.ts

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

vite.config.ts

@@ -0,0 +1,58 @@
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import eslint from 'vite-plugin-eslint';
+import wasm from 'vite-plugin-wasm';
+
+const envPrefix = 'REACT_APP_';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  // const env = { ...process.env, ...loadEnv(mode, process.cwd(), envPrefix) };
+  const env = loadEnv(mode, process.cwd(), envPrefix);
+  return {
+    envPrefix: envPrefix,
+    plugins: [react(), wasm(), eslint()],
+    resolve: {
+      alias: {
+        src: path.resolve(__dirname, './src'),
+        constants: 'constants-browserify',
+        http: 'stream-http',
+        https: 'https-browserify',
+        os: 'os-browserify/browser',
+        stream: 'stream-browserify',
+        timers: 'timers-browserify',
+        url: 'url',
+        'xmlhttprequest-ts': './node_modules/xmlhttprequest-ts/bundles/xmlhttprequest-ts.umd.js'
+      }
+    },
+    define: {
+      'process.env': env
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        // Node.js global to browser globalThis
+        define: {
+          global: 'globalThis'
+        },
+        plugins: [
+          NodeGlobalsPolyfillPlugin({
+            buffer: true,
+            process: false
+          })
+        ]
+      }
+    },
+    test: {
+      globals: true
+    },
+    server: {
+      port: 8000
+    },
+    build: {
+      target: 'esnext',
+      outDir: 'build'
+    }
+  };
+});