Miscellaneous changes

.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

devserver/src/components/Playground.tsx

@@ -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/editor/Editor.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/sideContent/TestTab.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',

devserver/src/components/utils/AceHelper.ts

@@ -1,9 +1,8 @@
-/* eslint-disable new-cap */
+import * as ace from 'ace-builds/src-noconflict/ace';
 import { HighlightRulesSelector, ModeSelector } from 'js-slang/dist/editors/ace/modes/source';
 import { Chapter, Variant } from 'js-slang/dist/types';
-import ace from 'react-ace';
 
-export const getModeString = () => `source${Chapter.SOURCE_4}${Variant.DEFAULT}${''}`;
+export const modeString = `source${Chapter.SOURCE_4}${Variant.DEFAULT}`;
 
 /**
  * This _modifies global state_ and defines a new Ace mode globally, if it does not already exist.
@@ -15,12 +14,7 @@ export const selectMode = () => {
   const variant = Variant.DEFAULT;
   const library = '';
 
-  if (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-    typeof ace.define.modules[`ace/mode/${getModeString(chapter, variant, library)}`]?.Mode
-    === 'function'
-  ) {
+  if (typeof ace.define.modules[`ace/mode/${modeString}`]?.Mode === 'function') {
     return;
   }
 

devserver/src/main.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-
-import './styles/index.scss';
+import ReactDOM from 'react-dom/client';
 import Playground from './components/Playground';
+import './styles/index.scss';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 
-ReactDOM.render(<React.StrictMode>
+root.render(<React.StrictMode>
   <div className="Application">
     <div className="Application__main">
       <Playground />
     </div>
   </div>
-</React.StrictMode>, document.getElementById('root')!);
+</React.StrictMode>);

devserver/src/styles/_commons.scss

@@ -1,36 +1,3 @@
-.ContentDisplay {
-  height: fit-content;
-  width: 100%;
-
-  &.row {
-    margin-right: 0px;
-    margin-left: 0px;
-  }
-
-  .#{$ns}-non-ideal-state {
-    padding-bottom: 0.7rem;
-
-    > .#{$ns}-non-ideal-state-visual .#{$ns}-icon {
-      display: flex;
-    }
-  }
-
-  .contentdisplay-content-parent {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding: 0px;
-
-    .contentdisplay-content {
-      background-color: white;
-      > * {
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
 .#{$ns}-running-text.md {
   pre > code {
     -webkit-box-shadow: none;
@@ -60,39 +27,3 @@
     top: 0;
   }
 }
-
-.WhiteBackground {
-  background-color: white;
-  padding: 20px;
-  border-radius: 10px;
-}
-
-.Horizontal {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-}
-
-.Vertical {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: center;
-}
-
-.VerticalStack {
-  > * + * {
-    margin-top: 10px;
-  }
-}
-
-.Centered {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-.WaitingCursor {
-  cursor: wait;
-}

devserver/src/styles/_editorTabs.scss

@@ -10,48 +10,3 @@
     padding-right: 8px;
   }
 }
-
-.editor-tab-container {
-  display: flex;
-  flex-direction: row;
-  column-gap: 4px;
-  overflow-x: scroll;
-  // Hide scrollbar on Firefox.
-  scrollbar-width: none;
-  // Hide scrollbar on Webkit-based browsers.
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-  padding-bottom: 4px;
-}
-
-.editor-tab {
-  padding: 5px 5px 5px 10px;
-  // !important is necessary to override the default Card background-color property.
-  background-color: $cadet-color-1 !important;
-  display: flex;
-  flex-direction: row;
-  column-gap: 4px;
-  user-select: none;
-  white-space: nowrap;
-
-  &:hover {
-    // !important is necessary to override the default Card background-color property.
-    background-color: $cadet-color-3 !important;
-  }
-
-  &.selected {
-    // !important is necessary to override the default Card background-color property.
-    background-color: $cadet-color-2 !important;
-  }
-
-  .remove-button {
-    opacity: 25%;
-
-    &:hover {
-      background: black;
-      border-radius: 10px;
-    }
-  }
-}