Miscellaneous changes (#314)

* Bump dependencies in lockfile

* Update some versions in package.json

* Bump js-slang to v1.0.74

* Bump more dependencies

* Deduplicate dependencies

* Remove unused ESLint plugin

* Bump Vite to v5

* Update Vite config

* Migrate to React 18 `createRoot`

* Simplify Ace mode string

* Fix Ace editor runtime error

* Clean up Playground and Editor components

* Remove unused `react-hotkeys`
* Use Blueprint components instead of CSS API
* Remove commented/unnecessary code

* Reformat test tab

* Remove `react-hotkeys` dependency

* Remove `react-responsive` dependency

* Bump esbuild and remove resolution

Was previously causing dependency errors on Apple Silicon.

* Remove unused classes

* Fix Vite types

* Remove unused ESLint disable directives

* Bump husky from v5 to v9

* Bump gl resolution to v8

Done to make use of their prebuilt binaries for Node 20.

* Revert "Bump gl resolution to v8"

This reverts commit 81db412.

* Make curve render functions have nice toStrings

* Use parseInt instead of Number.parseFloat

* Fix too many lines at end of file

* Fix naming of test cases

* Update lockfile post-merge

* Remove vscode setting now that flat configs are default

* Update curve module tests

* Add a test for checking json documentation building

* Update yarn lock

* Fix lock file

* Update eslint config to use tseslint helper and fix new linting issues

* Add new type imports linting config

* Run linting

* Move hextocolor to utilities

* Add building the linting plugin to the script building command

* Fix scripts not compiling

* Fix linting of scripts

* Update devserver

* Fix formatting

---------

Co-authored-by: Lee Yi <[email protected]>

Author: RichDom2185

.gitignore

@@ -7,8 +7,7 @@ build/*
 /package-lock.json
 coverage/
 
-scripts/build/database.json
-scripts/bin.js
+scripts/dist
 
 # Compiled source #
 ###################

.husky/post-checkout

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn yarnhook

.husky/post-merge

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn yarnhook

.husky/post-rewrite

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn yarnhook

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn test --color

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn build --lint --tsc

.vscode/settings.json

@@ -8,7 +8,6 @@ import createContext from 'js-slang/dist/createContext';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import { stringify } from 'js-slang/dist/utils/stringify';
 import React, { useCallback } from 'react';
-import { HotKeys } from 'react-hotkeys';
 import mockModuleContext from '../mockModuleContext';
 import type { InterpreterOutput } from '../types';
 import Workspace, { type WorkspaceProps } from './Workspace';
@@ -39,7 +38,7 @@ const createContextHelper = () => {
   return tempContext;
 };
 
-const Playground: React.FC<{}> = () => {
+const Playground: React.FC = () => {
   const [dynamicTabs, setDynamicTabs] = React.useState<SideContentTab[]>([]);
   const [selectedTabId, setSelectedTab] = React.useState(testTabContent.id);
   const [codeContext, setCodeContext] = React.useState<Context>(createContextHelper());
@@ -111,7 +110,6 @@ const Playground: React.FC<{}> = () => {
 
   const evalCode = () => {
     codeContext.errors = [];
-    // eslint-disable-next-line no-multi-assign
     codeContext.moduleContexts = mockModuleContext.moduleContexts = {};
 
     runInContext(editorValue, codeContext)
@@ -191,12 +189,10 @@ const Playground: React.FC<{}> = () => {
   };
 
   return (
-    <HotKeys
-      className={classNames('Playground', Classes.DARK)}
-    >
+    <div className={classNames('Playground', Classes.DARK)}>
       <OverlayToaster ref={toaster} />
       <Workspace {...workspaceProps} />
-    </HotKeys>
+    </div>
   );
 };
 

devserver/src/components/Playground.tsx

@@ -1,15 +1,12 @@
-import { type Ace, require as acequire } from 'ace-builds';
+import { Card } from '@blueprintjs/core';
+import { require as acequire, type Ace } from 'ace-builds';
+import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/ext-searchbox';
-import 'ace-builds/esm-resolver';
-
 import 'js-slang/dist/editors/ace/theme/source';
-
 import React from 'react';
 import AceEditor, { type IAceEditorProps } from 'react-ace';
-import { HotKeys } from 'react-hotkeys';
-
-import { getModeString, selectMode } from '../utils/AceHelper';
+import { modeString, selectMode } from '../utils/AceHelper';
 import type { KeyFunction } from './EditorHotkeys';
 
 export type EditorKeyBindingHandlers = { [key in KeyFunction]?: () => void };
@@ -60,11 +57,6 @@ const moveCursor = (editor: AceEditor['editor'], position: Position) => {
   editor.renderer.scrollCursorIntoView(position, 0.5);
 };
 
-/* Override handler, so does not trigger when focus is in editor */
-const handlers = {
-  goGreen() {}
-};
-
 const Editor: React.FC<EditorProps> = (props: EditorProps) => {
   const reactAceRef: React.MutableRefObject<AceEditor | null> = React.useRef(null);
 
@@ -115,7 +107,7 @@ const Editor: React.FC<EditorProps> = (props: EditorProps) => {
     fontSize: 17,
     height: '100%',
     highlightActiveLine: false,
-    mode: getModeString(),
+    mode: modeString,
     theme: 'source',
     value: props.editorValue,
     width: '100%',
@@ -137,47 +129,16 @@ const Editor: React.FC<EditorProps> = (props: EditorProps) => {
         },
         exec: props.handleEditorEval
       }
-      // {
-      //   name: 'navigate',
-      //   bindKey: {
-      //     win: 'Ctrl-B',
-      //     mac: 'Command-B'
-      //   }
-      // },
-      // {
-      //   name: 'refactor',
-      //   bindKey: {
-      //     win: 'Ctrl-M',
-      //     mac: 'Command-M'
-      //   }
-      // },
-      // {
-      //   name: 'highlightScope',
-      //   bindKey: {
-      //     win: 'Ctrl-Shift-H',
-      //     mac: 'Command-Shift-H'
-      //   },
-      // },
-      // {
-      //   name: ' typeInferenceDisplay',
-      //     bindKey: {
-      //     win: 'Ctrl-Shift-M',
-      //     mac: 'Command-Shift-M'
-      //   }
-      // }
     ]
-    // commands: Object.entries(keyHandlers)
-    // .filter(([_, exec]) => exec)
-    // .map(([name, exec]) => ({ name, bindKey: keyBindings[name], exec: exec! }))
   };
 
   return (
     <div className="editor-container">
-      <HotKeys className="Editor bp4-card bp4-elevation-0" handlers={handlers}>
+      <Card className="Editor">
         <div className="row editor-react-ace" data-testid="Editor">
           <AceEditor {...aceEditorProps} ref={reactAceRef} />
         </div>
-      </HotKeys>
+      </Card>
     </div>
   );
 };

devserver/src/components/editor/Editor.tsx

@@ -1,20 +1,21 @@
 import { IconNames } from '@blueprintjs/icons';
 import type { SideContentTab } from './types';
 
-const TestTab = () => <div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  marginBottom: '5px'
-}}>
-  <h2>Source Academy Tab Development Server</h2>
-  <p style={{
+const TestTab: React.FC = () => (
+  <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginBottom: '5px'
   }}>
-    Run some code that imports modules in the editor on the left. You should see the corresponding module tab spawn.<br />
-    Whenever you make changes to the tab, the server should automatically reload and show the changes that you've made <br />
-    If that does not happen, you can click the refresh button to manually reload tabs
-  </p>
-</div>;
+    <h2>Source Academy Tab Development Server</h2>
+    <p>
+      Run some code that imports modules in the editor on the left. You should see the corresponding module tab spawn.<br />
+      Whenever you make changes to the tab, the server should automatically reload and show the changes that you've made <br />
+      If that does not happen, you can click the refresh button to manually reload tabs
+    </p>
+  </div>
+);
 
 const testTabContent: SideContentTab = {
   id: 'test',